底部TabBar两种切换效果

第一种 类似Android的微信

类似微信的Tabbar 可以滑动中间的内容区，下面Tabbar做出相应的选中TabbarItem的响应
相应的点击下方Tabbar，上面的内容区也要切换到对应页面

import 'package:flutter/material.dart';
import 'package:flutter_trip/pages/home_page.dart';
import 'package:flutter_trip/pages/my_page.dart';
import 'package:flutter_trip/pages/search_page.dart';
import 'package:flutter_trip/pages/travel_page.dart';

class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  int _selectIndexPage = 0;
  final PageController _controller = PageController(initialPage: 0);
  final List _tabs = [HomePage(), SearchPage(), TravelPage(), MyPage()];
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: PageView(
        controller: _controller,
        children: <Widget>[HomePage(), SearchPage(), TravelPage(), MyPage()],
        onPageChanged: (index) {
          setState(() {
            _selectIndexPage = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
          unselectedItemColor: Colors.grey,
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Colors.indigoAccent,
          currentIndex: _selectIndexPage,
          onTap: (index) {
            setState(() {
              this._selectIndexPage=  index;
              _controller.jumpToPage(index);
            });
          },
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页"),),
            BottomNavigationBarItem(icon: Icon(Icons.search), title: Text("搜索"),),
            BottomNavigationBarItem(icon: Icon(Icons.card_travel), title: Text("旅拍"),),
            BottomNavigationBarItem(icon: Icon(Icons.perm_identity), title: Text("我的"),),
          ]),
    );
  }
}

这里主要用了PageView这个组件作为Body，根据不同的_selectIndexPage 通过_controller.jumpToPage(index);来跳转到不同的页面

第二种 与iOS项目类似的不允许左右滑动切换，只能点击TabbarItem切换的方式

import 'package:flutter/material.dart';
import 'taps/Home.dart';
import 'taps/Category.dart';
import 'taps/Setting.dart';

class MyTabBarViw extends StatefulWidget {
  final index;

  MyTabBarViw({Key key, this.index = 0}) : super(key: key);

  @override
  _MyTabBarViwState createState() => _MyTabBarViwState(this.index);
}

class _MyTabBarViwState extends State<MyTabBarViw> {
  int _currentSelectIndex = 0;
  List _pageList = [HomePage(), Setting(), Category()];

  _MyTabBarViwState(index) {
    this._currentSelectIndex = index;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
//        body: HomePage(),
        appBar: AppBar(
          title: Text('RowAndCoulmn'),
        ),
        body: this._pageList[this._currentSelectIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentSelectIndex,
          onTap: (int index) {
            setState(() {
              this._currentSelectIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_time), title: Text("Setting")),
            BottomNavigationBarItem(icon: Icon(Icons.apps), title: Text("分类")),
          ],
        ),
      ),
    );
  }
}

通过设置不同的Body来切换不同的页面