PrepBro
← Назад к вопросам

Реализовать Bottom Navigation с сохранением состояния

2.0 Middle🔥 221 комментариев
#State Management#Архитектура Flutter#Навигация

Условие

Создайте приложение с нижней навигацией, где каждый таб сохраняет своё состояние.

Требования

  1. BottomNavigationBar с 3-4 табами
  2. Каждый таб — отдельный Navigator (вложенная навигация)
  3. Сохранение состояния таба при переключении
  4. Возврат по Back button работает внутри таба
  5. Повторное нажатие на активный таб возвращает к корню

Дополнительные баллы

  • Анимация переключения табов
  • Бейдж с количеством уведомлений
  • Скрытие навигации при скролле вниз
  • Кастомный дизайн BottomNavigationBar

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI23 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Flutter Bottom Navigation с сохранением состояния

Полное решение с вложенной навигацией и сохранением состояния каждого таба.

Архитектура

  1. Main Navigator - корневая навигация между табами
  2. Nested Navigators - отдельный Navigator для каждого таба
  3. State Management - сохранение состояния каждого таба
  4. Route Management - управление историей навигации

Компоненты

  1. BottomNavigationBar - нижняя панель навигации
  2. IndexedStack - отображение активного таба без пересоздания
  3. WillPopScope - перехват Back button
  4. Badge - бейдж с уведомлениями
  5. Custom Navigation - кастомный дизайн

Функциональность

  1. Вложенная навигация - каждый таб имеет свой Navigator
  2. Сохранение состояния - таб не пересоздается при переключении
  3. Back navigation - работает внутри таба
  4. Double tap - повторное нажатие возвращает к корню таба
  5. Бейджи - отображение уведомлений
  6. Скрытие при скролле - автоматическое скрытие при прокрутке
  7. Анимация - плавный переход между табами
  8. Кастомный дизайн - красивый внешний вид

Файлы

  • main_navigation.dart - корневой экран с навигацией
  • nested_navigator.dart - вложенный navigator для таба
  • bottom_navigation_item.dart - элемент навигации
  • home_tab.dart - содержимое таба Home
  • search_tab.dart - содержимое таба Search
  • profile_tab.dart - содержимое таба Profile
  • settings_tab.dart - содержимое таба Settings

Особенности реализации

  1. IndexedStack - ключ для сохранения состояния
  2. GlobalKey<NavigatorState> - доступ к Navigator каждого таба
  3. WillPopScope - перехват Back кнопки
  4. setState - обновление при смене таба
  5. AnimatedContainer - плавная анимация

Сохранение состояния

  • ScrollPosition в списках
  • Form values в формах
  • Текущая страница в пейджинации
  • Выбранные элементы
  • История навигации таба

Бейджи

  • Отображение количества уведомлений
  • Красный фон с белым текстом
  • Расположение в верхнем углу иконки
  • Обновление при новых уведомлениях

Скрытие при скролле

  • Использование ScrollNotificationListener
  • Анимация opacity
  • Быстрое восстановление при остановке прокрутки

Навигация внутри таба

  • Кнопка back работает внутри таба
  • Двойное нажатие на активный таб - к корню
  • Сохранение история маршрутов для каждого таба

Это production-ready решение для навигации!

Реализовать Bottom Navigation с сохранением состояния | PrepBro