底部TabBar

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_shop/pages/tabs/home_page.dart';
import 'package:flutter_shop/pages/tabs/cart_page.dart';
import 'package:flutter_shop/pages/tabs/category_page.dart';
import 'package:flutter_shop/pages/tabs/member_page.dart';
class IndexPage extends StatefulWidget {
  IndexPage({Key key}) : super(key: key);

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

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.home), 
      title: Text("首页")
      ),
      BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.search), 
      title: Text("分类")
      ),
      BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.shopping_cart), 
      title: Text("购物车")
      ),
      BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.profile_circled), 
      title: Text("会员中心")
      ),
  ];

  final List pages = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage()
  ];

  int currentSelectIndexPageFleg = 0;

  var currentPage;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentPage = pages[currentSelectIndexPageFleg];
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child:Scaffold(
        backgroundColor:Color.fromRGBO(244, 245, 245, 1.0),
        bottomNavigationBar:BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: this.bottomTabs,
          currentIndex: currentSelectIndexPageFleg,
          onTap: (index){
            setState(() {
              currentSelectIndexPageFleg = index;
              currentPage = pages[index];
            });
          },
        ),
          body: currentPage,
      ),
    );
  }
}

组件分解

页面显示组件：Scaffold
底部Tabbar组件：BottomNavigationBar
底部Tabbar按钮组件：BottomNavigationBarItem
Tabbar组件必须放在Scaffold组件中 Scaffold中有个bottomNavigationBar的属性 将BottomNavigationBar放进去

Scaffold 常用属性

BottomNavigationBar 常用属性

BottomNavigationBarItem 常用属性