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