flutter TabBar底部图片背景，类似于淘宝海淘

1、秉承看不懂就问的原则，直接上代码；

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:midou_ee/utils/screen_util.dart';

class ShopServicePage extends StatefulWidget {
  ShopServicePage({Key key}) : super(key: key);

  @override
  _ShopServicePageState createState() => _ShopServicePageState();
}

class _ShopServicePageState extends State<ShopServicePage> with TickerProviderStateMixin, AutomaticKeepAliveClientMixin<ShopServicePage>{

  List _tabsTitle = ['全部', '预约', '带服务', '已完成', '已取消'];
  static double _topBarDefaultTop = ScreenUtil.statusBarHeight;

  double _topBarHeight = 48;
  double _topBarTop = _topBarDefaultTop;
  static double _tabControllerDefaultTop = ScreenUtil.statusBarHeight + 48;
  double _tabControllerTop = _tabControllerDefaultTop;
  double _tabBarHeight = 48;
  static double _topBackgroundDefaultTop = 0;
  double _topBackgroundTop = _topBackgroundDefaultTop;
  TabController _tabController;
  int _selectedTabBarIndex = 0;
  _handleTabSelection() {
    print('_handleTabSelection:${_tabController.index}');
    if (_selectedTabBarIndex == _tabController.index) {
      return;
    }
    setState(() {
      _selectedTabBarIndex = _tabController.index;
    });
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(vsync: this, length: _tabsTitle.length);
    _tabController.addListener(_handleTabSelection);
  }
  
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

    Container(
        decoration: new BoxDecoration(
          gradient: const LinearGradient(colors: [Colors.orange, Colors.deepOrange]),
        ),
//                color: Theme.of(context).primaryColor,
        width: ScreenUtil.screenWidth,
        height: ScreenUtil.screenHeight / 4);

          return Scaffold(
            body: Stack(
              children: <Widget>[
                AnimatedPositioned(
                  curve: Curves.easeInOut,
                  duration: const Duration(milliseconds: 500),
                  left: 0,
                  top: _topBackgroundTop,
                  child: Image.asset('assets/images/mine/shopservice_bg@3x.png',width: ScreenUtil.screenWidth,fit: BoxFit.fill,),
                ),
                AnimatedPositioned(
                  curve: Curves.easeInOut,
                  duration: const Duration(milliseconds: 500),
                  left: 0,
                  top: _topBarTop,
                  width: ScreenUtil.screenWidth,
                  child: Container(
                    height: _topBarHeight,
                    child: _buildTopBar(),
                  ),
                ),
                AnimatedPositioned(
                  curve: Curves.easeInOut,
                  duration: const Duration(milliseconds: 500),
                  top: _tabControllerTop,
                  left: 0,
                  width: ScreenUtil.screenWidth,
                  height: ScreenUtil.screenHeight - (ScreenUtil.screenHeight / 4) / 2,
                  child: Container(
                    child: DefaultTabController(length: _tabsTitle.length, child: _buildContentWidget()),
                  ),
                )
              ],
            ),
          );
        }
        Widget _buildContentWidget() {
          return Column(
            children: <Widget>[
              Container(
                height: _tabBarHeight,
                padding: const EdgeInsets.only(top: 8, bottom: 8),
                child: TabBar(
                    controller: _tabController,
                    indicatorColor: Colors.white,
                    indicatorSize: TabBarIndicatorSize.label,
                    isScrollable: true,
                    labelColor: Colors.white,
                    unselectedLabelColor: Colors.white,
                    labelStyle: TextStyle(fontSize: 14),
                    onTap: (i) {
                      print(i);
                    },
                    tabs: _tabsTitle
                        .map((i) => Text(
                              i,
                            ))
                        .toList()),
              ),
              Expanded(
                  child: TabBarView(
                controller: _tabController,
                children: _tabsTitle.map((value) {
                  return Container(
                    child: Text('data'),
                  );
                  // return WeiTaoListPage(
                  //   onNotification: _onScroll,
                  // );
                }).toList(),
              ))
            ],
          );
        }

        Widget _buildTopBar() {
          return Row(
            children: <Widget>[
              SizedBox(
                width: 8,
              ),
              GestureDetector(
                child: Icon(
                  Icons.arrow_back_ios,
                  color: Colors.white,
                ),
                onTap: (){
                  Navigator.pop(context);
                },
              ),
              GestureDetector(
                child: Container(
                  height: 20,
                  child: Image.asset('assets/images/mine/shopservice_font@3x.png',),
                ),
              ),
              Expanded(
                child: Text(
                  '',
                  style: TextStyle(fontSize: 19, fontWeight: FontWeight.bold, color: Colors.white),
                ),
              ),
            ],
          );
        }
        @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

screen_util 这个工具类是计算宽高的，百度一下有很多，就不提供了，没有的可以私聊我