🧩BottomNavigationBar()

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

1. Простой пример с BottomNavigationBar

Это самый простой пример использования, где мы создаем навигационную панель с тремя элементами.

// Some code
Scaffold(
  appBar: AppBar(title: Text('Пример BottomNavigationBar')),
  body: Center(child: Text('Главный экран')),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Главная',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Поиск',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Профиль',
      ),
    ],
  ),
)

Здесь BottomNavigationBar содержит три вкладки: "Главная", "Поиск", "Профиль". Каждая вкладка имеет иконку и текстовое описание.

2. Параметр currentIndex

currentIndex используется для указания, какая вкладка сейчас активна.

// Some code
Scaffold(
  appBar: AppBar(title: Text('Навигация')),
  body: Center(child: Text('Выбрана вкладка Главная')),
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: 1, // Вторая вкладка активна
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Главная',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Поиск',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Профиль',
      ),
    ],
  ),
)

3. Параметр onTap

onTap позволяет определить, что происходит при нажатии на определенную вкладку. Обычно используется для обновления состояния приложения.

// Some code
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BottomNavigationBar')),
      body: Center(
        child: Text('Выбрана вкладка: $_selectedIndex'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Главная',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Поиск',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Профиль',
          ),
        ],
      ),
    );
  }
}

Здесь при нажатии на любую вкладку обновляется состояние, и текст на экране меняется в зависимости от выбранной вкладки.

4. Параметр type

Этот параметр определяет, как будет выглядеть навигационная панель. Варианты: fixed (по умолчанию) и shifting.

• fixed оставляет иконки и текст на месте.

• shifting анимирует иконки при нажатии и изменяет фон активной вкладки.

// Some code
BottomNavigationBar(
  type: BottomNavigationBarType.shifting, // Включена анимация и смена цвета
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Главная',
      backgroundColor: Colors.blue, // Цвет при выборе
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Поиск',
      backgroundColor: Colors.red, // Цвет при выборе
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Профиль',
      backgroundColor: Colors.green, // Цвет при выборе
    ),
  ],
)

Здесь используется стиль shifting, где цвет фона меняется в зависимости от выбранной вкладки.

5. Параметр selectedItemColor и unselectedItemColor

Эти параметры позволяют настроить цвет активных и неактивных вкладок.

// Some code
BottomNavigationBar(
  currentIndex: _selectedIndex,
  selectedItemColor: Colors.amber, // Цвет активной вкладки
  unselectedItemColor: Colors.grey, // Цвет неактивных вкладок
  onTap: _onItemTapped,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Главная',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Поиск',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Профиль',
    ),
  ],
)

Активная вкладка будет выделяться желтым цветом, а неактивные — серым.

6. Параметр iconSize

Этот параметр позволяет изменять размер иконок.

// Some code
BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  iconSize: 30, // Размер иконок
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Главная',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Поиск',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Профиль',
    ),
  ],
)

Все иконки будут увеличены до 30 пикселей.

7. Параметр showSelectedLabels и showUnselectedLabels

Эти параметры управляют отображением подписей под иконками для выбранных и невыбранных элементов.

// Some code
BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  showSelectedLabels: true, // Показывать подпись выбранной вкладки
  showUnselectedLabels: false, // Скрывать подписи невыбранных вкладок
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Главная',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Поиск',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Профиль',
    ),
  ],
)