Flutter 在Appbar底部创建自定义TabBar ,可自定义背景颜色

import 'package:flutter/material.dart';
import 'package:flutter_cmlive/utils/config.dart';
import '../chatpages/like.dart';
import '../chatpages/recommend.dart';
import'../chatpages/one.dart';
import'../chatpages/two.dart';
import'../chatpages/three.dart';
import'../chatpages/four.dart';
import'../chatpages/five.dart';
class ChatPage extends StatefulWidget {
  @override
  State createState() => ChatPageState();
}

class ChatPageState extends State with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new DefaultTabController(
        length: stars.length,
        child: new Scaffold(
          appBar: new PreferredSize(
//            设置高度
              child: new AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0,
                title: new TabBar(
                  isScrollable: true,
                  indicatorColor: Colors.transparent,
                  labelColor:Colors.red[400],
                  unselectedLabelColor: Colors.red[200],
                  tabs: stars.map((Stars star) {
                    return new Tab(
                      text: star.title,
                    );
                  }).toList(),
                ),
              ),
              preferredSize: Size.fromHeight(Config.autoHeight(25))),
          body: new TabBarView(
           children: [
             new LikePage(),
             new RecommendPage(),
             new OnePage(),
             new TwoPage(),
             new ThreePage(),
             new FourPage(),
             new FivePage(),
           ],
          ),
        ),
      ),
    );
  }
}

class Stars {
  final String title;

  const Stars({this.title});
}

const List stars = const [
  Stars(title: '关注'),
  Stars(title: '推荐'),
  Stars(title: '一星'),
  Stars(title: '二星'),
  Stars(title: '三星'),
  Stars(title: '四星'),
  Stars(title: '五星'),
];

 

你可能感兴趣的:(Flutter 在Appbar底部创建自定义TabBar ,可自定义背景颜色)