zhiying_base_widget/lib/pages/wallet_page/wallet_detail_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tab_indicator_styler/tab_indicator_styler.dart';
import 'package:zhiying_base_widget/pages/wallet_page/wallet_detail_list_page.dart';
import 'package:zhiying_comm/util/extension/color.dart';

class WalletDetailPage extends StatefulWidget {
  @override
  _WalletDetailPageState createState() => _WalletDetailPageState();
}

class _WalletDetailPageState extends State<WalletDetailPage>
    with TickerProviderStateMixin {
  TabController _controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _createNav(),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            _createTab(),
            Expanded(
              child: _createContent(),
            ),
          ],
        ),
      ),
    );
  }

  // 导航栏
  Widget _createNav() {
    return CupertinoNavigationBar(
      border: Border(
        bottom: BorderSide(
          width: 0.0, // One physical pixel.
          style: BorderStyle.none,
        ),
      ),
      backgroundColor: Colors.white,
      leading: Navigator.canPop(context)
          ? GestureDetector(
              child: Container(
                padding: EdgeInsets.zero,
                child: Icon(
                  Icons.arrow_back_ios,
                  size: 20,
                ),
              ),
              onTap: () {
                if (Navigator.canPop(context)) {
                  Navigator.pop(context);
                }
              },
            )
          : Container(),
      middle: Text(
        '明细',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xff333333),
        ),
      ),
    );
  }

  Widget _createTab() {
    return Container(
      color: Colors.white,
      child: TabBar(
        isScrollable: false,
        labelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
        unselectedLabelStyle: TextStyle(fontSize: 13),
        indicator: MaterialIndicator(
          height: 2,
          topLeftRadius: 8,
          topRightRadius: 8,
          bottomLeftRadius: 8,
          bottomRightRadius: 8,
          color: HexColor.fromHex('#F94B47'),
          horizontalPadding: 30,
        ),
        controller: _controller,
        tabs: List.generate(2, (index) => Tab(text: '收入明细')),
        indicatorColor: Colors.red,
        unselectedLabelColor: HexColor.fromHex('#999999'),
        labelColor: HexColor.fromHex('#000000'),
      ),
    );
  }

  Widget _createContent() {
    return TabBarView(
      controller: _controller,
      children: <Widget>[WalletDetailListPage(), Container()],
    );
  }
}