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

1. Создание базовой панели приложений:
   Чтобы создать базовую панель приложений во Flutter, вы можете использовать виджет AppBar, предоставляемый платформой Flutter. Вот пример того, как это реализовать:

AppBar(
  title: Text('My App'),
),

2. Настройка AppBar.
   Виджет AppBar позволяет использовать различные параметры настройки для повышения визуальной привлекательности вашего приложения. Давайте рассмотрим несколько методов:

а. Добавление действий:
Действия обычно представлены значками, расположенными в правой части панели приложений. Вы можете добавлять действия, используя свойство actionsAppBar. Вот пример:

AppBar(
  title: Text('My App'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Perform search action
      },
    ),
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {
        // Open settings screen
      },
    ),
  ],
),

б. Изменение цвета фона:
Вы можете изменить цвет фона панели приложений с помощью свойства backgroundColor. Вот пример:

AppBar(
  title: Text('My App'),
  backgroundColor: Colors.blue,
),

3. Реализация BottomNavigationBar:
   Виджет BottomNavigationBar используется для создания панели навигации в нижней части экрана. Это позволяет пользователям переключаться между различными экранами или вкладками в приложении. Вот пример того, как это реализовать:

BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
),

4. Обработка взаимодействий BottomNavigationBar:
   Чтобы обрабатывать взаимодействия с BottomNavigationBar, вам необходимо сохранить выбранный индекс и определить функцию обратного вызова. Вот пример:

int _selectedIndex = 0;
void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

5. Настройка BottomNavigationBar:
   Виджет BottomNavigationBar предлагает несколько вариантов настройки. Вы можете изменить внешний вид, цвета и поведение панели навигации. Вот несколько способов:

а. Изменение цвета выбранного элемента.
Вы можете изменить цвет выбранного элемента с помощью свойства selectedItemColor. Вот пример:

BottomNavigationBar(
  selectedItemColor: Colors.blue,
  // Rest of the code...
),

б. Изменение цвета невыделенного элемента.
Чтобы изменить цвет невыделенных элементов, вы можете использовать свойство unselectedItemColor. Вот пример:

BottomNavigationBar(
  unselectedItemColor: Colors.grey,
  // Rest of the code...
),

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