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

Метод 1: использование свойства TextStyle
Самый простой способ стилизовать текст в AppBar — указать свойство textStyle. Это свойство принимает объект TextStyle, который позволяет настраивать различные аспекты текста, такие как шрифт, цвет, размер и т. д. Вот пример:

AppBar(
  title: Text(
    'My App',
    style: TextStyle(
      fontSize: 20,
      fontWeight: FontWeight.bold,
      color: Colors.white,
    ),
  ),
),

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

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(
        'My App',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    );
  }
}

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

Theme(
  data: ThemeData(
    appBarTheme: AppBarTheme(
      textTheme: TextTheme(
        headline6: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    ),
  ),
  child: AppBar(
    title: Text('My App'),
  ),
),

Метод 4: использование форматированного текста
Если вам нужно применить разные стили к разным частям текста AppBar, вы можете использовать виджет RichText. Этот виджет позволяет вам составлять текст с несколькими стилями в одном виджете. Вот пример:

AppBar(
  title: RichText(
    text: TextSpan(
      style: TextStyle(fontSize: 20, color: Colors.white),
      children: <TextSpan>[
        TextSpan(
          text: 'My',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        TextSpan(text: ' App'),
      ],
    ),
  ),
),

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