Bottom Navigation PageView In Flutter

Bottom Navigation PageView In Flutter :

Bottom Navigation PageView In Flutter :This flutter tutorial post bottom navigation pageview in flutter using slider.

Bottom navigation bar in flutter three properties.these are icon, title and activeIcon. If title not define in bottom navigation bar menu display the error.

For example:

 BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle))

Bottom navigation bar title empty, null, black and hide define in flutter: 
 BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: SizedBox.shrink())

Screenshot :

Bottom Navigation PageView In Flutter

Bottom Navigation PageView In Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Tutorial',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentIndex = 0;
  PageController pageController;

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () {
          return;
        },
        child: Scaffold(
            body: PageView(
                controller: pageController,
                children: <Widget>[
                  Container(child: SafeArea(child: Text('1'))),
                  Container(child: SafeArea(child: Text('2'))),
                  Container(child: SafeArea(child: Text('3'))),
                  Container(child: SafeArea(child: Text('4'))),
                  Container(child: SafeArea(child: Text('5'))),
                ],
                onPageChanged: (int index) {
                  setState(() {
                    currentIndex = index;
                  });
                }),
            bottomNavigationBar: bottomItems()));
  }

  BottomNavigationBar bottomItems() {
    return BottomNavigationBar(
        selectedItemColor: Colors.blue,
        onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
          pageController.animateToPage(
            index,
            duration: Duration(
              milliseconds: 200,
            ),
            curve: Curves.easeIn,
          );
        },
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: SizedBox.shrink()),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: SizedBox.shrink()),
          BottomNavigationBarItem(
              icon: Icon(Icons.add_circle, size: 35.0),
              title: SizedBox.shrink()),
          BottomNavigationBarItem(
              icon: Icon(Icons.notifications), title: SizedBox.shrink()),
          BottomNavigationBarItem(
              icon: Icon(Icons.supervised_user_circle),
              title: SizedBox.shrink())
        ]);
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in