Как сделать чтобы фон заходил в системную панель навигации?

Для того чтобы фон вашего приложения в Flutter заходил в системную панель навигации, вы можете использовать свойство extendBody в Scaffold. Чтобы это сработало, вам нужно прописать следующие шаги:

1. Вам нужно добавить Scaffold виджет в вашу главную страницу. Внутри него вы будете строить ваш интерфейс приложения.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // это свойство позволяет контент расширяться за системную панель
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Container(
          // ваш контент будет здесь
          ),
    );
  }
}

2. Далее, чтобы сделать фон заходящим на системную панель навигации, добавьте Container внутри body с расширением на весь размер экрана, используя MediaQuery.of(context).size:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Colors.blue,
              Colors.green,
            ],
          ),
        ),
      ),
    );
  }
}

В этом примере мы использовали градиентный фон, но вы можете использовать любой другой вид фона, такой как изображение или цветовую заливку.

Обратите внимание, что вам может потребоваться установить свойство extendBodyBehindAppBar на true, если AppBar находится над ваших контентом и вы хотите чтобы фон заходил в AppBar.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      extendBodyBehindAppBar: true, // фон заходит за AppBar
      appBar: AppBar(
        title: Text('My App'),
        backgroundColor: Colors.transparent, // делаем AppBar прозрачным
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Colors.blue,
              Colors.green,
            ],
          ),
        ),
      ),
    );
  }
}

Теперь ваш фон будет расширяться за системную панель навигации на всех экранах вашего приложения.