flutter 自定義tabbar 給tabbar添加背景功能

flutter 自帶的tabbar BottomNavigationBar有長按水波紋效果，不能夠添加背景圖片功能，若是有這方面的需求，就須要自定義tabbar了

自定義圖片 咱們使用BottomAppBar 設定寬高，內部的UI就能夠徹底自定義 測試了一下，基本能達到想要的效果

廢話很少了，直接上代碼了

import 'package:flutter/material.dart';
import 'home.dart';
import 'category.dart';
import 'activity.dart';
import 'mine.dart';

class TabbarPage extends StatefulWidget {
  @override
  _TabbarPageState createState() => _TabbarPageState();
}

class _TabbarPageState extends State<TabbarPage> {
 PageController _pageController;

  List images = [
    ['assets/tab_icon_home.png', 'assets/tab_icon_home_selected.png'],
    ['assets/tab_icon_category.png', 'assets/tab_icon_category_selected.png'],
    ['assets/tab_icon_collect.png', 'assets/tab_icon_collect_selected.png'],
    ['assets/tab_icon_profile.png', 'assets/tab_icon_profile_selected.png'],
  ];

  final List _titles = ['首頁', '好物', '雙11', '個人'];

  final List<Widget> _tabBodies = [
    HomePage(),
    CategoryPage(),
    ActivityPage(),
    MinePage(),
  ];

  int _currentIndex = 0;

  void initState() {
    super.initState();
    this._pageController =PageController(initialPage: _currentIndex, keepPage: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // body: IndexedStack(
      //   index: _currentIndex,
      //   children: _tabBodies,
      // ),
      body: PageView(
        children: _tabBodies,
        controller: _pageController,
        // physics: NeverScrollableScrollPhysics(),
      ),
      // bottomNavigationBar: BottomNavigationBar(
      //   backgroundColor: Colors.brown,
      //   type: BottomNavigationBarType.fixed,
      //   currentIndex: _currentIndex,
      //   items: getItems(),
      //   onTap: (index) {
      //     setState(() {
      //       _currentIndex = index;
      //       // _pageController.jumpToPage(index);
      //     });
      //   },
      // ),
      bottomNavigationBar: _bottomAppBar(),
    );
  }

  BottomAppBar _bottomAppBar() {
    double width = MediaQuery.of(context).size.width;
    double height = 60;

    return BottomAppBar(
      child: Container(
        //設置背景
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.cover,
            repeat: ImageRepeat.noRepeat,
            image: AssetImage('assets/tab_festival_background_android.png'),
          ),
        ),
        width: width,
        height: height,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: _customItems(),
        ),
      ),
    );
  }

  /*獲取tab圖片*/
  Widget getTabIcon(int index) {
    if (_currentIndex == index) {
      return Image.asset(
        images[index][1],
        width: 30,
        fit: BoxFit.fitHeight,
      );
    }
    return Image.asset(images[index][0], width: 30, fit: BoxFit.fitHeight);
  }

/*獲取tab文字*/
  Text getTabText(int index) {
    if (_currentIndex == index) {
      return Text(
        _titles[index],
        style: TextStyle(color: Color(0xFFEA164B), fontSize: 11),
      );
    }

    return Text(
      _titles[index],
      style: TextStyle(color: Color(0xFF8228CF), fontSize: 11),
    );
  }

  /*獲取tabbatItem*/
  List<BottomNavigationBarItem> getItems() {
    return [
      BottomNavigationBarItem(
        icon: getTabIcon(0),
        title: getTabText(0),
      ),
      BottomNavigationBarItem(icon: getTabIcon(1), title: getTabText(1)),
      BottomNavigationBarItem(icon: getTabIcon(2), title: getTabText(2)),
      BottomNavigationBarItem(icon: getTabIcon(3), title: getTabText(3)),
    ];
  }

  List<Widget> _customItems() {
    double width = MediaQuery.of(context).size.width;
    //均分紅4分
    double itemWidth = width / 4.0;
    return images.map((img) {
      int index = images.indexOf(img);
      return GestureDetector(
        onTap: () {
          setState(() {
            _currentIndex = index;
            _pageController.jumpToPage(index);
          });
        },
        child: Container(
          color: Colors.transparent,
          width: itemWidth * 0.8,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              getTabIcon(index),
              getTabText(index),
            ],
          ),
        ),
      );
    }).toList();
  }
}

tabbar中經過pageView來實現頁面的持久保存，細節參考