底部导航栏TabBar实现

import 'package:flutter/material.dart';
import 'package:zybdapp/finance/finance_home.dart';
import 'package:zybdapp/oil_card/oil_card_home.dart';
import 'package:zybdapp/transport/transport_home.dart';
import 'package:zybdapp/user_center/user_center_home.dart';

class MainNavigaionScreen extends StatefulWidget {
  @override
  _MainNavigaionScreenState createState() => _MainNavigaionScreenState();
}

class _MainNavigaionScreenState extends State
    with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(vsync: this, length: 4);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        children: [
          OilCardScreen(),
          FinanceScreen(),
          TransportScreen(),
          UserCenterScreen()
        ],
        controller: controller,
      ),
      bottomNavigationBar: Material(
        color: Colors.white,
        child: TabBar(
          indicatorColor: Colors.deepOrange,
          labelColor: Colors.deepOrange,
          unselectedLabelColor: Colors.black,
          controller: controller,
          tabs: [
            Tab(
              text: "首页",
              icon: Icon(Icons.home),
            ),
            Tab(
              text: "金融",
              icon: Icon(Icons.local_atm),
            ),
            Tab(
              text: "驿运",
              icon: Icon(Icons.airport_shuttle),
            ),
            Tab(
              text: "我的",
              icon: Icon(Icons.account_box),
            )
          ],
        ),
      ),
    );
  }
}