實現(xiàn)效果如下：

底部tabbar切換.gif

本文采用 Scaffold 下bottomNavigationBar實現(xiàn)

1.必須繼承StatefulWidget下State ,原因是因為導航欄需要改變頁面
2.了解BottomNavigationBar一些屬性

items:導航欄的icon和文字數(shù)組
onTap：選中處理
currentIndex: 當前選中的下標

開始擼代碼，先看一下主要代碼實現(xiàn)。下面代碼items中是我們需要的tab主要元素圖片和文字，onTap是按下方法處理主要是切換頁面，_dataPage[position]是要展示的頁面。當onTap按下，currentIndex賦值給position,然后進行_dataPage[position]頁面切換：

@override
  Widget build(BuildContext context) {
    parentContext = context;
    _initTab();
    // TODO: implement build
    return new Scaffold(
      body: _dataPage[position],
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(icon: getIcon(0),title:getText(0)),
          new BottomNavigationBarItem(icon: getIcon(1),title:getText(1)),
          new BottomNavigationBarItem(icon: getIcon(2),title:getText(2))
        ],
        onTap: _clickTab,//選擇按下的處理
        currentIndex: position,//當前按下
      ),
    );
  }

下面是變量和數(shù)據(jù)的初始化：

 //當前按下的坐標
  int position = 0;
  //文字資源
  var _dataTab;
  //圖片資源
  var _dataIcon ;
  //頁面
  var _dataPage;
 //初始化數(shù)據(jù)
  void _initTab() {
    _dataTab = ["首頁","發(fā)現(xiàn)","我的"];
    _dataIcon = [
      [Images.main_nor,Images.main],
      [Images.find_nor,Images.find],
      [Images.me_nor,Images.me]
    ];
    _dataPage = [
      new MainPage(fContext:parentContext),
      new FindPage(),
      new MindPage()
    ];
  }

整體代碼如下：

import 'package:flutter/material.dart';
import 'package:flutter_app_test/common/Resource.dart';
import 'package:flutter_app_test/page/main/MainPage.dart';
import 'package:flutter_app_test/page/main/FindPage.dart';
import 'package:flutter_app_test/page/main/MindPage.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,//去除右上角debug
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:new _MainTab(),

    );
  }
}

class _MainTab extends StatefulWidget{


  _MainTab();

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _MainBottomTab();
  }
}

class _MainBottomTab extends State<_MainTab>{
  //當前按下的坐標
  int position = 0;
  //文字資源
  var _dataTab;
  //圖片資源
  var _dataIcon ;
  //頁面
  var _dataPage;
  var parentContext;

  //按下tab的處理
  void _clickTab(int index){
    setState(() {
      position = index;
      print("按下的Index:${index} \t position:${position}");
    });
  }
  //初始化數(shù)據(jù)
  void _initTab() {
    _dataTab = ["首頁","發(fā)現(xiàn)","我的"];
    _dataIcon = [
      [Images.main_nor,Images.main],
      [Images.find_nor,Images.find],
      [Images.me_nor,Images.me]
    ];
    _dataPage = [
      new MainPage(fContext:parentContext),
      new FindPage(),
      new MindPage()
    ];
  }
  //選擇圖片
  Image getIcon(int index){
    //判斷是否是選中的下標，如果是就用選中的icon
    String select =   index == position ? _dataIcon[index][1] : _dataIcon[0][0] ;
    return new Image.asset(select,width: 20,height: 20);
  }
  //字體
  Text getText(int index){
    //如果是選中的就用選中的顏色字體
    Color textColor = index == position ? new Color(0xff1296db) : Colors.black87;
    return new Text(
      _dataTab[index],
      style: new TextStyle(
        fontSize: 12,
        color: textColor //我們設置的顏色
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    parentContext = context;
    _initTab();
    // TODO: implement build
    return new Scaffold(
      body: _dataPage[position],
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(icon: getIcon(0),title:getText(0)),
          new BottomNavigationBarItem(icon: getIcon(1),title:getText(1)),
          new BottomNavigationBarItem(icon: getIcon(2),title:getText(2))
        ],
        onTap: _clickTab,//選擇按下的處理
        currentIndex: position,//當前按下
      ),
    );
  }
}
class _BarBean {
  Icon icon;
  String title;
}

git直通車
，里面有我已經(jīng)寫好的banner無限循環(huán)和文字上下輪播效果。