Search code examples
flutternavigationbarbottom-navigation-barbottombar

What is the best way to make a persistent bottom navigation bar?


I need a permanent bottom navigation bar with Flutter. I want to do this with 5 elements. At the same time, 4 of these 5 elements will redirect to the page and 1 will redirect to the url. When the url is visited and returned, the page should stay where it was last. I want to do this in a simple and good way, can you please help?

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../../core/constants/app_assets.dart';
import '../../../blocs/navigation_bar/navigation_bar_bloc.dart';
import 'navigation_bar_item.dart';

class CustomNavigationBar extends StatelessWidget {
  const CustomNavigationBar({
    super.key,
    required this.currentIndex,
  });

  final int currentIndex;

  @override
  Widget build(BuildContext context) {
    return NavigationBar(
      height: 70.h,
      labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
      selectedIndex: currentIndex,
      onDestinationSelected: (int index) {
        context
            .read<NavigationBarBloc>()
            .add(NavigationIndexChanged(index: index));
      },
      destinations: destinations,
    );
  }
}

const List<Widget> destinations = [
  BottomNavigationItem(item: AppAssets.bottomHome, label: 'Anasayfa'),
  BottomNavigationItem(item: AppAssets.bottomBaskan, label: 'Başkan'),
  SizedBox(width: 0, height: 0),
  BottomNavigationItem(item: AppAssets.bottomFabim, label: 'Fabim'),
  BottomNavigationItem(item: AppAssets.bottomFatih, label: 'Kütüphane'),
];

This way page and url redirects work but I couldn't make it permanent


Solution

  • I recommend you check the GoRouter lib for navigation and read the Nested navigation chapter.

    https://pub.dev/documentation/go_router/latest/topics/Configuration-topic.html