A Swipable PageView BottomNavigationBar in flutter using PageController

In this Tutorial example we will create a PageView BottomNavigationBar  Navigation using PageController in flutter.

Synchronized Swipeable Pages with the PageView Widget in flutter framework.

How to implement left-right swipe navigation in your flutter app using PageView widget and PageController. PageView with BottomNavigationBar  both will remain in sync, Whenever user switched between the pages. 

It is the main.dart file of the flutter bottomNavigationbar tutorial example with PageView synchronized Swipe movement.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'All Freelancing Websites App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
    );
  }
}

MyHomePage   is a StatefulWidget where we have placed the bottomNavigationBar  and the  PageView  .

I have used ClipRRect  property for creating a circular BottomNavigationBar, which looks awesome.

animateToPage   proprty specifies the animation type and duration for the PageView   pages.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State {
  int _seletedItem = 0;
  var _pages = [HomePage(), LibraryBooksPage(), SettingsPage()];
  var _pageController = PageController();
  bool result = true;
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          extendBody: true,
          backgroundColor: Colors.transparent,
          body: PageView(
            //scrollDirection: Axis.vertical,
            children: _pages,
            onPageChanged: (index) {
              setState(() {
                _seletedItem = index;
              });
            },
            controller: _pageController,
          ),
          bottomNavigationBar: Padding(
            padding: const EdgeInsets.all(30.0),
            child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(100),
                      topLeft: Radius.circular(100),
                      bottomLeft: Radius.circular(100),
                      bottomRight: Radius.circular(100)),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black38, spreadRadius: 0, blurRadius: 10),
                  ],
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(100.0),
                      topRight: Radius.circular(100.0),
                      bottomLeft: Radius.circular(100),
                      bottomRight: Radius.circular(100)),
                  child: BottomNavigationBar(
                    selectedItemColor: Theme.of(context).primaryColor,
                    unselectedItemColor: Colors.grey[500],
                    items: [
                      // ignore: deprecated_member_use
                      BottomNavigationBarItem(
                          // ignore: deprecated_member_use
                          icon: Icon(Icons.image_rounded),
                          // ignore: deprecated_member_use
                          title: Text('Home')),
                      BottomNavigationBarItem(
                          // ignore: deprecated_member_use
                          icon: Icon(Icons.photo),
                          // ignore: deprecated_member_use
                          title: Text('Photos')),
                      BottomNavigationBarItem(
                          // ignore: deprecated_member_use
                          icon: Icon(Icons.account_circle),
                          // ignore: deprecated_member_use
                          title: Text('Profile'))
                    ],
                    currentIndex: _seletedItem,
                    onTap: (index) {
                      setState(() {
                        _seletedItem = index;
                        _pageController.animateToPage(_seletedItem,
                            duration: Duration(milliseconds: 200),
                            curve: Curves.linear);
                      });
                    },
                  ),
                )),
          ),
      );
  }
}

Thanks for reading...

Please Subscribe for more unique recent contents...