[Learning] BottomNavigationBar Flutter bottom navigation bar of the basic components of

I. Overview

　　BottomNavigationBarThat is bottom navigation bar control, design control appears in the bottom of the page for attempting to switch the bottom navigation bar contains several labels, icons, or both with the form, in a nutshell provides quick navigation between the top-level view .

Two, Bar key elements

• BottomNavigationBar　　
  
  • B ottomNavigationBar  belongs Scaffold one at the bottom of the control. Usually  BottomNavigationBarItem  used in conjunction.
    
  • BottomNavigationBar constructor
    

     BottomNavigationBar({
        Key key,
        @required this.items,  
        this.onTap,
        this.currentIndex = 0,
        BottomNavigationBarType type,
        this.fixedColor,
        this.iconSize = 24.0,
      })

  • BottomNavigationBar Parameter Meaning
    

    
    
    

• BottomNavigationBarItem
  
  • Item bottom navigation bar to be displayed with an icon and the title composition
    
    
  • BottomNavigationBarItem constructor
    

      const BottomNavigationBarItem({
        @required this.icon,
        this.title,
        Widget activeIcon,
        this.backgroundColor,
      })

  • BottomNavigationBarItem Parameter Meaning
    
    

Third, the implementation process

• 1. Construction of the bottom of the label
  

   // navigation icon 
     Final List <BottomNavigationBarItem> bottomNavItems = [
        new new BottomNavigationBarItem (
         backgroundColor: Colors.blue,
         icon: Icon(Icons.home),
         title: new new Text ( " Home " )
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.green,
         icon: Icon(Icons.message),
         title: new new the Text ( ' message ' )
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.amber,
         icon: Icon(Icons.shopping_cart),
         title: new new Text ( " cart " )
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.red,
         icon: Icon(Icons.person),
         title: the Text ( ' individual centers ' )
       )
     ];

• 2. Building a navigation display page
  

   //视图view
      final pageViews = [
          new HomePage(),
          new MsgPage(),
          new CartPage(),
          new PersonPage()
      ];

• 2. Create the bottom navigation bar
  

        / * * If you click on a page other than the current navigation key to switch * / 
      void _changePage ( int index) {
        IF (index! = CurrentIndex) {
         setState(() {
           currentIndex = index;
         });
       }
      }
   
      @override
      Widget build(BuildContext context) {
      // TODO: implement build
      return new DefaultTabController(
        length: myTabs.length,
        child:  new Scaffold(
          appBar: new AppBar(
            title: new new the Text ( " top tab bar ' ),
            bottom: new TabBar(
              indicatorColor: Colors.blue,
              tabs: myTabs,
              isScrollable: true,
            ),
          ),
         
          bottomNavigationBar: new BottomNavigationBar(
            items: bottomNavItems,
            currentIndex: currentIndex,
            type: BottomNavigationBarType.fixed,
            onTap: (index) {
               _changePage(index);
            },
          ), 
          body: pageViews[currentIndex],
        ),
    );
  }
   

• 3. Complete
  

  import 'package:flutter/material.dart';
  import './HomePage.dart';
  import './CartPage.dart';
  import './MsgPage.dart';
  import './PersonPage.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new MaterialApp(
        title: ' Page Layout ' ,
        theme:new ThemeData(
          primarySwatch: Colors.red
        ),
        home: new App(),
      );
    }
  }
  
  class App extends StatefulWidget {
  
    @override
    State<StatefulWidget> createState() {
      // TODO: implement createState
      return new AppState();
    }
  }
  
  class AppState extends State<App> {
  
      // navigation icon 
     Final List <BottomNavigationBarItem> bottomNavItems = [
        new new BottomNavigationBarItem (
         backgroundColor: Colors.blue,
         icon: Icon(Icons.home),
         title: new new Text ( " Home " )
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.green,
         icon: Icon(Icons.message),
         title: new new the Text ( ' message ' )
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.amber,
         icon: Icon(Icons.shopping_cart),
         title: new new Text ( " cart " )
       ),
  
       new BottomNavigationBarItem(
         backgroundColor: Colors.red,
         icon: Icon(Icons.person),
         title: the Text ( ' individual centers ' )
       )
     ];
  
     int currentIndex;
  
     //视图view
      final pageViews = [
          new HomePage(),
          new MsgPage(),
          new CartPage(),
          new PersonPage()
      ];
  
      @override
      void initState() {
        super.initState();
        currentIndex = 0;
      }
  
        / * * If you click on a page other than the current navigation key to switch * / 
      void _changePage ( int index) {
        IF (index! = CurrentIndex) {
         setState(() {
           currentIndex = index;
         });
       }
      }
   
      @override
      Widget build(BuildContext context) {
      // TODO: implement build
      return  new Scaffold(
          appBar: new AppBar(
            title: new new the Text ( " top tab bar ' ),
          ),
         
          bottomNavigationBar: new BottomNavigationBar(
            items: bottomNavItems,
            currentIndex: currentIndex,
            type: BottomNavigationBarType.fixed,
            onTap: (index) {
               _changePage(index);
            },
          ), 
          body: pageViews[currentIndex],
      );
   }
  }