Изучение различных методов добавления значков префиксов и суффиксов на панель приложений во Flutter

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

Метод 1. Использование начальных и конечных свойств виджета AppBar
Один простой подход — использовать свойства leadingи trailingвиджета AppBarвиджет. Эти свойства позволяют нам добавлять виджеты в виде значков в левой и правой частях панели приложения соответственно.

AppBar(
  leading: Icon(Icons.search), // Prefix icon
  title: Text('App Bar with Prefix Icon'),
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.notifications), // Suffix icon
    ),
  ],
)

Метод 2: настройка виджета AppBar с помощью строки
Другой способ добавить значки префиксов и суффиксов — настроить виджет AppBarс помощью Row. Этот метод дает вам больше гибкости в расположении значков на панели приложения.

AppBar(
  title: Row(
    children: [
      Icon(Icons.search), // Prefix icon
      Text('App Bar with Prefix Icon'),
      Icon(Icons.notifications), // Suffix icon
    ],
  ),
)

Метод 3. Создание пользовательского виджета AppBar
Для более расширенной настройки вы можете создать собственный виджет AppBar, который инкапсулирует желаемый макет и поведение. Такой подход дает вам полный контроль над внешним видом и функциональностью панели приложения.

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Row(
        children: [
          Icon(Icons.search), // Prefix icon
          Text('App Bar with Prefix Icon'),
          Icon(Icons.notifications), // Suffix icon
        ],
      ),
    );
  }
}
// Usage:
Scaffold(
  appBar: CustomAppBar(),
  // ...
)

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