Flutter底部Tabbar组件使用

APP都少不了底部tabbar导航，Flutter也提供了对应组件，上代码：
TabsPage.dart:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';

import 'package:seller/res/colors/colors.dart';
import 'package:seller/pages/tabs/user.dart';
import 'package:seller/pages/tabs/home.dart';
import 'package:seller/pages/tabs/message.dart';
import 'package:seller/pages/tabs/marketting.dart';
import 'package:seller/untils/tools.dart';

class TabsPage extends StatefulWidget {
  @override
  _TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  int _currentPageIndex = 0;
  DateTime _lastPressedAt; //上次点击时间
  List<Widget> _pageList = [
    HomePage(),
    MessagePage(),
    MarkettingPage(),
    UserPage(),
  ];

  Widget _bottomNavigationBar() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: this._currentPageIndex,
      unselectedItemColor: ThemeColors.medium,
      selectedItemColor: ThemeColors.primary,
      items: _bottomNavigationBarItemList(),
      onTap: (int index) {
        setState(() {
          this._currentPageIndex = index;
        });
      },
    );
  }

  List<BottomNavigationBarItem> _bottomNavigationBarItemList() {
    return <BottomNavigationBarItem>[
      _bottomNavigationBarItem(
          icon: _currentPageIndex == 0
              ? "lib/res/assets/images/tabs/home-selected.svg"
              : "lib/res/assets/images/tabs/home.svg",
          title: '工作台'),
      _bottomNavigationBarItem(
          icon: _currentPageIndex == 1
              ? "lib/res/assets/images/tabs/info-selected.svg"
              : "lib/res/assets/images/tabs/info.svg",
          title: '消息'),
      _bottomNavigationBarItem(
          icon: _currentPageIndex == 2
              ? "lib/res/assets/images/tabs/marketing-selected.svg"
              : "lib/res/assets/images/tabs/marketing.svg",
          title: '营销'),
      _bottomNavigationBarItem(
          icon: _currentPageIndex == 3
              ? "lib/res/assets/images/tabs/user-selected.svg"
              : "lib/res/assets/images/tabs/user.svg",
          title: '我的'),
    ];
  }

  BottomNavigationBarItem _bottomNavigationBarItem(
      {String icon, String title}) {
    return BottomNavigationBarItem(
      icon: SvgPicture.asset(icon, width: 25, height: 25),
      title: Text(
        title,
        style: TextStyle(fontSize: ScreenUtil().setSp(12)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        body: IndexedStack(
            children: this._pageList, 
            index: this._currentPageIndex,
        ),
        bottomNavigationBar: _bottomNavigationBar(),
      ),
      onWillPop: () async {
        if (_lastPressedAt == null ||
            DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
          //两次点击间隔超过1秒则重新计时
          _lastPressedAt = DateTime.now();
          Tools().toast('再按一次退出');
          return false;
        }
        return true;
      },
    );
  }
}

在main.dart中引入使用：

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/cupertino.dart';
import 'package:seller/routes/routes.dart';
import 'package:seller/pages/tabs/tabs.dart';

import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  // 沉浸式
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return FlutterEasyLoading(
      child: MaterialApp(
        title: 'APP',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          platform:
              Platform.isAndroid ? TargetPlatform.android : TargetPlatform.iOS,
          textTheme: TextTheme(
            subhead: TextStyle(textBaseline: TextBaseline.alphabetic),
          ),
        ),
        home: MyHomePage(),
        onGenerateRoute: (RouteSettings settings) {
          // 路由表对应单页
          Widget _page = Router.routerStore[settings.name];
          print(settings.arguments);
          // 埋点等操作

          // 自定义路由动画
          return CupertinoPageRoute(
              settings: settings, builder: (context) => _page);
        },
        localizationsDelegates: [
          //此处 系统是什么语言就显示什么语言
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
          //此处 系统是什么语言就显示什么语言
          const Locale('zh', 'CH'),
          const Locale('en', 'US'),
        ],
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 375, height: 667, allowFontScaling: false);
    return TabsPage();
  }
}