Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – 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

Tags:

2

Answers


  1. 0

    Use AutomaticKeepAliveClientMixin on the pages you want to maintain the state, try this:

    class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocBuilder<NavigationBarBloc, int>(
        builder: (context, currentIndex) {
          return IndexedStack(
            index: currentIndex,
            children: const [
              Page1(),
              Page2(),
              SizedBox(), 
              Page3(),
              Page4(),
            ],
          );
        },
      ),
      bottomNavigationBar: BlocBuilder<NavigationBarBloc, int>(
        builder: (context, currentIndex) {
          return CustomNavigationBar(currentIndex: currentIndex);
        },
      ),
    );
  }
}

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<NavigationDestination> destinations = [
  NavigationDestination(icon: Icon(Icons.home), label: 'Page 1'),
  NavigationDestination(icon: Icon(Icons.business), label: 'Page 2'),
  NavigationDestination(icon: Icon(Icons.school), label: 'Page 3'),
  NavigationDestination(icon: Icon(Icons.library_books), label: 'Page 4'),
];


class Page1 extends StatefulWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text('Page 1'));
  }

  @override
  bool get wantKeepAlive => true;
}

class Page2 extends StatefulWidget {
  const Page2({Key? key}) : super(key: key);

  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text('Page 2'));
  }

  @override
  bool get wantKeepAlive => true;
}

class Page3 extends StatefulWidget {
  const Page3({Key? key}) : super(key: key);

  @override
  _Page3State createState() => _Page3State();
}

class _Page3State extends State<Page3> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text('Page 3'));
  }

  @override
  bool get wantKeepAlive => true;
}

class Page4 extends StatefulWidget {
  const Page4({Key? key}) : super(key: key);

  @override
  _Page4State createState() => _Page4State();
}

class _Page4State extends State<Page4> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Center(child: Text('Page 4'));
  }

  @override
  bool get wantKeepAlive => true;
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search