Во Flutter AppBar — это общий компонент, используемый для отображения панели навигации в верхней части экрана. По умолчанию AppBar использует основной цвет, определенный в теме. Однако существуют различные способы настройки цвета темы AppBar в соответствии с дизайном вашего приложения. В этой статье мы рассмотрим несколько методов с примерами кода, которые помогут вам изменить цвет темы AppBar во Flutter.

Методы настройки цвета темы AppBar:

1. Использование свойства PrimaryColor в виджете MaterialApp:
   Свойство PrimaryColor позволяет вам определить основной цвет вашего приложения. Этот цвет будет использоваться в качестве цвета фона AppBar, если он не будет переопределен явно.

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primaryColor: Colors.blue, // Set your desired color here
    ),
    home: MyApp(),
  ));
}

2. Использование свойства appBarTheme в виджете ThemeData:
   Свойство appBarTheme позволяет определить тему для всех панелей приложений в вашем приложении. Вы можете указать цвет фона с помощью свойства цвета.

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      appBarTheme: AppBarTheme(
        color: Colors.blue, // Set your desired color here
      ),
    ),
    home: MyApp(),
  ));
}

3. Использование свойства backgroundColor виджета AppBar:
   Если вы хотите настроить цвет AppBar для определенного экрана, вы можете использовать свойство backgroundColor виджета AppBar.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // Set your desired color here
        title: Text('My App'),
      ),
      body: Container(),
    );
  }
}

4. Использование динамического цвета темы с StatefulWidget:
   Если вам нужно динамически менять цвет темы AppBar в зависимости от взаимодействия с пользователем или состояния приложения, вы можете использовать StatefulWidget и обновлять цвет в зависимости от определенных условий.

>

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  Color appBarColor = Colors.blue; // Set your initial color here
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: appBarColor,
        title: Text('My App'),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            appBarColor = Colors.red; // Set your desired color here
          });
        },
        child: Icon(Icons.color_lens),
      ),
    );
  }
}