Bottom Navigation Bar With Center Dock In Flutter

Bottom Navigation Bar With Center Dock In Flutter :

Bottom Navigation Bar With Center Dock In Flutter : In this flutter tutorial we will learn about How to create bottom navigation bar with center dock in flutter

center dock in the bottom navigation bar is used to get the data from the user in this flutter tutorial i am displaying the plus sign so user can upload the specific file.suppose you have a flutter app which is used for display the wallpaper.so you can design the bottom navigation bar with center dock so user can upload the wallpaper from the device

Screenshot :

Bottom Navigation Bar With Center Dock.dart

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(
        primaryColor: Colors.white,
      ),
      home: BottomNavigationBarWidget(),
    );
  }
}

class BottomNavigationBarWidget extends StatefulWidget {
  @override
  _BottomNavigationBarWidgetState createState() => _BottomNavigationBarWidgetState();
}

class _BottomNavigationBarWidgetState extends State<BottomNavigationBarWidget> {
  final _bottomNavigationBarColor = Colors.white;
  List<Widget> _dynamicPageList;
  int _index = 0;

  @override
  void initState() {
    _dynamicPageList = List();
    _dynamicPageList..add(DynamicPage('1'))..add(DynamicPage('2'))..add(DynamicPage('3'))..add(DynamicPage('4'));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _dynamicPageList[_index],
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.green,
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(
              builder:(BuildContext context){
                return DynamicPage('Detail');
              }
          ));
        },

        tooltip: '',
        child: Icon(
          Icons.add,
          color: _bottomNavigationBarColor,
        )
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.green,
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[

            IconButton(
              icon: Icon(Icons.home),
              color: _bottomNavigationBarColor,
              onPressed: (){
                setState(() {
                  _index = 0;
                });
              }
            ),

            IconButton(
              icon: Icon(Icons.dns),
              color: _bottomNavigationBarColor,
              onPressed: (){
                setState(() {
                  _index = 1;
                });
              }
            ),

            IconButton(
              icon: Icon(Icons.mail),
              color: _bottomNavigationBarColor,
              onPressed: (){
                setState(() {
                  _index = 2;
                });
              }
            ),

            IconButton(
              icon: Icon(Icons.record_voice_over),
              color: _bottomNavigationBarColor,
              onPressed: (){
                setState(() {
                  _index = 3;
                });
              }
            )
          ]
        )
      )
    );
  }
}

class DynamicPage extends StatefulWidget {
  String _title;
  DynamicPage(this._title);
  @override
  _DynamicPageState createState() => _DynamicPageState();
}

class _DynamicPageState extends State<DynamicPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget._title)),
      body: Center(child:Text(widget._title))
    );
  }
}

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