Flutter BottomNavigationBar customize the bottom navigation bar to achieve page switching

Flutter BottomNavigationBar component

BottomNavigationBar is the bottom navigation bar, which allows us to define the bottom Tab switch, bottomNatigationBar is the parameter of the Scaffold component.

 

Common attributes of BottomNavigationBar

Attributes	Description
items	List<BottomNavigationBarItem> bottom navigation bar button collection
iconSize	icon
currentIndex	Which one is selected by default
onTap	Selected change callback function
	onTap: (int index){           setState(() {             print("Tagwjlis index = ${index}");             this._currentIndex = index;           });         },
fixedColor	Selected color
type	BottomNavigationBarType.fixed //Configure the bottom tabs to have multiple buttons   BottomNavigationBarType.shifting

 

Implement a page switching function directory

 

main.dart

import 'package:flutter/material.dart';
import 'package:stack_align_positioned/pages/Tabs.dart';
import 'reg/listData.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  int _curentIndex = 0;
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }

}

Tabs.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stack_align_positioned/main.dart';
import 'package:stack_align_positioned/pages/tabs/CategoryPages.dart';
import 'package:stack_align_positioned/pages/tabs/HomePage.dart';
import 'package:stack_align_positioned/pages/tabs/SettingsPages.dart';

class Tabs extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _TabsState();
  }
}

class _TabsState extends State<Tabs>{
  int _currentIndex = 0;
  List _listPageData = [  //页面的链表
    HomePages(),
    CategoryPages(),
    SettingsPages()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter BottomNavigationBar"),
      ),
      body: this._listPageData[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,//配置对应的索引值选中
        onTap: (int index){//index 表示选择选项
          setState(() {
            print("Tagwjlis index = ${index}");
            this._currentIndex = index;
          });
        },
        iconSize: 36.0,           //icon的大小
        fixedColor: Colors.red,   //选中颜色
        type: BottomNavigationBarType.fixed,//配置底部tabs可以有多个按钮
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("首页")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text("分类")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("设置")
          )
        ],
      ),
    );
  }
}

 

HomePages.dart

import 'package:flutter/cupertino.dart';

class HomePages extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }

}

class _HomeState extends State<HomePages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Home Text"),
    );
  }
}

CategoryPages.dart

import 'package:flutter/cupertino.dart';

class CategoryPages extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CategorysStae();
  }
}

class _CategorysStae extends State<CategoryPages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("CategoryPages center"),
    );
  }
}

SettingsPages.dart

import 'package:flutter/cupertino.dart';

class SettingsPages extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return _SettingsStae();
  }
}

class _SettingsStae extends State<SettingsPages>{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("SettingsPages center"),
    );
  }
}