Custom Nav Bar, как сделать навигацию, что бы при переключении кнопка на которую нажимали оставалась?

Для реализации кастомной навигационной панели (Custom Nav Bar) в Flutter, вам потребуется использовать различные виджеты и управлять состояниями в приложении.

Существует несколько способов реализации custom nav bar, но одним из наиболее популярных является использование виджета BottomNavigationBar.

1. Создайте список значений для элементов навигационной панели. Например, вы можете использовать перечисление (enum) или список строк, чтобы определить имена и иконки для каждого элемента:

enum NavBarItem { Home, Profile, Settings }

final List<NavBarItem> navBarItems = [
  NavBarItem.Home,
  NavBarItem.Profile,
  NavBarItem.Settings,
];

2. Создайте состояние, чтобы отслеживать текущий выбранный элемент:

class MyWidgetState extends State<MyWidget> {
  NavBarItem selectedNavBarItem = NavBarItem.Home;
  
  // Метод обработки события при нажатии на элемент навигационной панели
  void onNavBarItemTapped(int index) {
    setState(() {
      selectedNavBarItem = navBarItems[index];
    });
  }
  
  // ...
}

3. Используйте виджет BottomNavigationBar внутри вашего Scaffold, чтобы создать навигационную панель с выбором элементов:

Scaffold(
  // ...
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: navBarItems.indexOf(selectedNavBarItem),
    onTap: onNavBarItemTapped,
    items: navBarItems.map((item) {
      return BottomNavigationBarItem(
        icon: Icon(getIconForNavBarItem(item)),
        label: getLabelForNavBarItem(item),
      );
    }).toList(),
  ),
  // ...
)

4. Добавьте методы getIconForNavBarItem и getLabelForNavBarItem для получения соответствующих значений иконки и текста для каждого элемента навигационной панели:

IconData getIconForNavBarItem(NavBarItem item) {
  switch (item) {
    case NavBarItem.Home:
      return Icons.home;
    case NavBarItem.Profile:
      return Icons.person;
    case NavBarItem.Settings:
      return Icons.settings;
    default:
      return Icons.home;
  }
}

String getLabelForNavBarItem(NavBarItem item) {
  switch (item) {
    case NavBarItem.Home:
      return 'Home';
    case NavBarItem.Profile:
      return 'Profile';
    case NavBarItem.Settings:
      return 'Settings';
    default:
      return 'Home';
  }
}

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

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