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

AppBar(
  title: Text(
    'My App',
    style: TextStyle(
      color: Colors.white, // Set the desired foreground color
    ),
  ),
)

Метод 2: использование AppBarTheme
Flutter предоставляет мощную систему тем, которая позволяет вам определить глобальную тему AppBar для вашего приложения. Используя AppBarTheme, вы можете установить цвет переднего плана для всех виджетов AppBar в вашем приложении.

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      foregroundColor: Colors.red, // Set the desired foreground color
    ),
  ),
)

Метод 3: настройка AppBar с помощью PreferredSizeWidget
Если вам нужен больший контроль над внешним видом AppBar, вы можете создать собственный виджет AppBar, расширив PreferredSizeWidget. Этот подход позволяет вам определить пользовательскую панель приложений с определенным цветом переднего плана.

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
  @override
  Widget build(BuildContext context) {
    return AppBar(
      foregroundColor: Colors.blue, // Set the desired foreground color
      title: Text('My Custom AppBar'),
    );
  }
}

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

class DynamicAppBar extends StatefulWidget {
  @override
  _DynamicAppBarState createState() => _DynamicAppBarState();
}
class _DynamicAppBarState extends State<DynamicAppBar> {
  Color foregroundColor = Colors.black; // Initial foreground color
  void changeColor() {
    setState(() {
      foregroundColor = Colors.red; // Set the desired foreground color dynamically
    });
  }
  @override
  Widget build(BuildContext context) {
    return AppBar(
      foregroundColor: foregroundColor,
      title: Text('Dynamic AppBar'),
    );
  }
}

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