底部导航栏

实现效果

实现代码

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {//SingleTickerProviderStateMixin 用于页面只会创建一次
  int _tabIndex = 0;
  PageController _pageController;
  var appBarTitles = ['首页', '代理', '我的'];
  List<Widget> _pages;


  Widget getTabTitle(int curIndex) {
    if (curIndex == _tabIndex) {
      return Container(
        padding: const EdgeInsets.only(top: 5.0),
        child: Text(appBarTitles[curIndex],
            style: new TextStyle(fontSize: 10.0, color: const Color(0xffdab866),)),
      );
    } else {
      return Container(
        padding: const EdgeInsets.only(top: 5.0),
        child: Text(appBarTitles[curIndex],
            style: new TextStyle(fontSize: 10.0, color: const Color(0xff666666),)),
      );
    }
  }

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: _tabIndex);
    _pages = [
      Container(
        color: Color(0xffff0000),
      ),
      Container(
        color: Color(0xff00ff00),
      ),
      Container(
        color: Color(0xff0000ff),
      ),

    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView.builder(
          controller: _pageController,
          itemCount: appBarTitles.length,
          onPageChanged: (index){
            setState(() {
              _tabIndex = index;
            });
          },
          itemBuilder: (BuildContext context,int index){
            return _pages[index];
          },
        ),
        bottomNavigationBar: Theme(
          data: ThemeData(//去除水波纹效果
              brightness: Brightness.light,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent),
          child: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                icon: Image.asset(
                  'assets/images/tab_icon_home_n.png',
                  width: 20.0,
                  height: 20.0,
                ),
                activeIcon: Image.asset('assets/images/tab_icon_home_s.png',
                    width: 20.0, height: 20.0),
                title: getTabTitle(0),
              ),
              BottomNavigationBarItem(
                icon: Image.asset(
                  'assets/images/tab_icon_agent_n.png',
                  width: 20.0,
                  height: 20.0,
                ),
                activeIcon: Image.asset('assets/images/tab_icon_agent_s.png',
                    width: 20.0, height: 20.0),
                title: getTabTitle(1),
              ),
              BottomNavigationBarItem(
                icon: Image.asset(
                  'assets/images/tab_icon_mine_n.png',
                  width: 20.0,
                  height: 20.0,
                ),
                activeIcon: Image.asset('assets/images/tab_icon_mine_s.png',
                    width: 20.0, height: 20.0),
                title: getTabTitle(2),
              ),
            ],
            currentIndex: _tabIndex,
            type: BottomNavigationBarType.fixed,
            onTap: (index) {
              setState(() {
                _tabIndex = index;
              });
              _pageController.animateToPage(index, duration: Duration(microseconds: 100), curve: Curves.ease);
            },
            backgroundColor: Color(0xff161616),
            selectedFontSize: 10.0,
            unselectedFontSize: 10.0,
            elevation: 0.0,
          ),
        ));
  }
}