Flutter BottomNavigationBar components

BottomNavigationBar bottom navigation bar, allows us to define the bottom of the Tab switching, bottomNavigationBar is Scaffold parameters of the component.

 

BottomNavigationBar common attributes

 

Property name	Explanation
items	List <BottomNavigationBarItem> bottom navigation bar button set
iconSize	icon
currentIndex	The first of several selected by default
onTap	Select the change callback
fixedColor	Selected color
type	BottomNavigationBarType.fixed BottomNavigationBarType.shifting

 

Sample code:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      )
    );
  }
}

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Tabs()
    );
  }
}


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

  _TabsState createState() => _TabsState();//_xxx私有变量
}

class _TabsState extends State<Tabs> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(

          currentIndex: 1,
          onTap: (int index){
              print(index);
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: the Text ( "classification" ) 
            ), 
            
             BottomNavigationBarItem ( 
              icon: Icon (Icons.settings), 
              title: the Text ( "Settings" ) 
            ) 
          ], 
        ), 
      ); 
  } 
}

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Tabs()
    );
  }
}


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

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {

  int _currentIndex=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(

          currentIndex: this._currentIndex,
          onTap: (int index){
              setState(() {
                  this._currentIndex=index;
              });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),
      );
  }
}

Development recommended (extraction separation):

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Tabs()
    );
  }
}

tabs.dart

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';

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

  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {

  int _currentIndex=0;
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ]; 
  @Override 
  the Widget Build (BuildContext context) { 
    return the Scaffold ( 
        appbar: the AppBar ( 
          title: the Text ( "Flutter Demo" ), 
        ), 
        body: the this ._pageList [ the this ._currentIndex], 
        bottomNavigationBar: BottomNavigationBar ( 
          the currentIndex: the this ._currentIndex ,    // configuration index corresponding to the selected value 
          onTap in: ( int index) { 
              the setState (() {   // change the state of 
                  the this ._currentIndex = index; 
              }); 
          }, 
          iconSize: 36.0,      // icon size 
          fixedColor: Colors.red,   // selected color   
          type: BottomNavigationBarType.fixed,    // configuration may have a plurality of bottom tabs buttons 
          items: [ 
            BottomNavigationBarItem ( 
              icon: Icon (Icons.home), 
              title: the Text ( "Home" ) 
            ), 
             BottomNavigationBarItem ( 
              icon: icon (Icons.category), 
              title: Text ( "classification" ) 
            ), 
            
             BottomNavigationBarItem ( 
              icon: icon (Icons.settings), 
              title: Text ( "settings" )
            )
          ],
        ),
      );
  }
}

 

home.dart

import 'package:flutter/material.dart';

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

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Text("首页");
  }
}

 Other similar

It can achieve common bottom navigation bar tab to switch to achieve different display page content!