Flutter BottomNavigationBar components

The BottomNavigationBar is the BottomNavigationBar that allows us to define the bottom Tab switch. The BottomNavigationBar is the parameter of the Scaffold component

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('hello BottomNavigationBar')),
        body: MyBody(),
        bottomNavigationBar:BottomNavigationBar(
          items: [
              BottomNavigationBarItem(
                title:Text("Home page"),
                icon:Icon(Icons.home)
              ),
              BottomNavigationBarItem(
                title:Text("Classification"),
                icon:Icon(Icons.category)
              ),
              BottomNavigationBarItem(
                title:Text("Settings"), icon:Icon(Icons.settings) ) ], ) ) ); }}Copy the code

• BottomNavigationBar common property

The property name	instructions
items	List bottom navigation bar button collection
iconSize	icon
currentIndex	Which number is selected by default
onTap	Select the change callback function
fixedColor	Selected color
type	BottomNavigationBarType.fixed / BottomNavigationBarType.. shifting
unselectedItemColor	Colors.grey
selectedItemColor	Colors.blue
backgroundColor	Theme.of(context).primaryColor

One thing to know is that if the BottomNavigationBar of a Flutter does not specify type, then the type of a Flutter is fixed when the items are less than 4, and the type of a Flutter is fixed when the items are greater than or equal to 4. Therefore, the problem of background color text disappearing occurs when the items are greater than or equal to 4. The specified type: BottomNavigationBarType. Fixed

• Dart has a bottomBar folder next to main.dart. The rest of the demo will be in this directory

main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    returnMaterialApp(home: MainPage()); }}Copy the code

mainPage

import 'package:flutter/material.dart';
import 'classifyPage.dart';
import 'homePage.dart';
import 'findPage.dart';
import 'setingPage.dart';

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

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

class _MainPageState extends State<MainPage> {
  int _tabIndex = 0;
  List _pageList = [
    new MyHomePage(),
    new ClassifyPage(),
    new SetingPage(),
    new FindPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('hello BottomNavigationBar')),
        body: this._pageList[_tabIndex],
        bottomNavigationBar: myBottomBar(context));
  }

  Widget myBottomBar(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: this._tabIndex,
      type: BottomNavigationBarType fixed, iconSize: 24.0, the items: [BottomNavigationBarItem (title: the Text ("Home page"), icon: Icon(Icons.home)),
        BottomNavigationBarItem(title: Text("Classification"), icon: Icon(Icons.category)),
        BottomNavigationBarItem(title: Text("Settings"), icon: Icon(Icons.settings)),
        BottomNavigationBarItem(
            title: Text('found'),
            icon: Image.asset('images/find.png', width: 24.0, height: 24.0))], onTap: (index) {setState(() { _tabIndex = index; }); }); }}Copy the code

homePage

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHomePage> {
  List dataList = new List();
  @override
  Widget build(BuildContext context) {
    return ListView(children: [
      Column(
          children: this.dataList.map((value) {
        return ListTile(
          title: Text(value),
        );
      }).toList()),
      SizedBox(height: 20),
      Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
        RaisedButton.icon(
            onPressed: () {
              setState(() {
                this.dataList.add(${this.datalist. Length + 1}');
              });
            },
            icon: Icon(Icons.add),
            label: Text('and'),
            color: Colors.green),
        RaisedButton.icon(
            onPressed: () {
              setState(() {
                if(this.dataList.length > 0) { this.dataList.removeLast(); }}); }, icon: Icon(Icons.remove), label: Text('cut'))]]); }}Copy the code

classifyPage

import 'package:flutter/material.dart';

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

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

class _ClassifyPageState extends State<ClassifyPage> {
  final time = new DateTime.now();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(children: <Widget>[Text('classification $time'))); }}Copy the code

setingPage

import 'package:flutter/material.dart';

class SetingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('set')); }}Copy the code

findPage

import 'package:flutter/material.dart';

class FindPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('found')); }}Copy the code

• Finally, in pubspec.yaml, you can download the images directly from iconfont

  assets:
    - images/find.png
    - images/find_selected.png
    - images/home.png
    - images/home_selected.png
    - images/mine.png
    - images/mine_selected.png
    ```
Copy the code