Flutter how to load new screen by tap on navigation bar

Question

I have created a custom bottom navigation bar for my app but I messed up my code. Right now its just shifting screen by true false value. I want to load screen but what I done is simple showing screen in body by bool.

My code

        bottomNavigationBar: CustomBottomNavigationBar(
          iconList: [
            'images/ichome.png',
            'images/icservice.png',
            'images/icstore.png',
            'images/Component 7 – 1@2x.png',
          ],
          iconList2: [
            'images/ichomeactive.png',
            'images/icserviceactive.png',
            'images/icstoreactive.png',
            'images/icaccount.png',
          ],
          onChange: (val) {
            setState(() {
              _selectedItem = val;
              print(val);
              if (val == 0) {
                setState(() {
                  home = true;
                  service = false;
                  shop = false;
                  account = false;
                });
              }
              if (val == 1) {
                home = false;
                service = true;
                shop = false;
                account = false;
              }
              if (val == 2) {
                home = false;
                service = false;
                shop = true;
                account = false;
              }
              if (val == 3) {
                home = false;
                service = false;
                shop = false;
                account = true;
              }
            });
          },
          defaultSelectedIndex: 0,
        ),

You can see on click I am changing bool value and in body show my widget. I know its wrong I do very stupid thing. That's why I need to know how I can load the page instead of just show and hide ? Also I need to show the navigation bar also on each page.

Answer 1

Please refer below code of Navigation bar

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: SettingView(),
    );
  }
}

class SettingView extends StatefulWidget {
  @override
  _SettingViewState createState() => _SettingViewState();
}

class _SettingViewState extends State<SettingView> {
  final tabs = [DashboardView(), NotificationView(), ProfileView()];

  int _currentIndex = 0;

  @override
  void initState() {
    setState(() {});
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40.0,
        elevation: 0,
        centerTitle: true,
        backgroundColor: Colors.blue,
        title: Text("Navigation Bar"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white.withOpacity(0.5),
        items: [
          BottomNavigationBarItem(
            icon: InkResponse(
              focusColor: Colors.transparent,
              hoverColor: Colors.transparent,
              highlightColor: Colors.transparent,
              child: Container(
                padding: EdgeInsets.only(
                  left: 10,
                ),
                child: Icon(
                  Icons.dashboard,
                ),
              ),
            ),
            title: Padding(padding: EdgeInsets.zero),
            backgroundColor: Colors.blue,
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: EdgeInsets.only(
                right: 10,
              ),
              child: Icon(Icons.notifications),
            ),
            title: Padding(padding: EdgeInsets.zero),
            backgroundColor: Colors.blue,
          ),
          BottomNavigationBarItem(
            icon: Container(
              padding: EdgeInsets.only(
                right: 10,
              ),
              child: Icon(Icons.account_box),
            ),
            title: Padding(padding: EdgeInsets.zero),
            backgroundColor: Colors.blue,
          )
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      body: tabs[_currentIndex],
    );
  }
}

/*Dashboard*/
class DashboardView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Dashboard"),
      ),
    );
  }
}

/*Notification*/
class NotificationView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Notification"),
      ),
    );
  }
}

/*Profile*/
class ProfileView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Profile"),
      ),
    );
  }
}

Answer 2

You can do something like that:

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
    title: 'app name',
    home: HomeScreen(),
    routes: <String, WidgetBuilder>{
      '/route1': (BuildContext context) => FirstScreen(),
      '/route2': (BuildContext context) => SecondScreen(),
   },
 );
}

Create reusable navigation bar Widget and for selected content just tell navigator where it needs to bring you:

Navigator.pushNamed(context, '/route1');