flutter实现tabar

Flutter中实现TabBar的方法有多种，其中一种常用的方法是使用DefaultTabController。在这种方法中，你可以使用TabBar和TabBarView两个组件来实现顶部的TabLayout效果。具体的代码实现如下：

class FirstPage extends StatefulWidget {
  FirstPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  State<StatefulWidget> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  final List<Tab> myTabs = <Tab>\[
    Tab(text: '全部订单'),
    Tab(text: '已完成'),
    Tab(text: '未完成')
  \];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: myTabs.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('FirstPage'),
          bottom: TabBar(
            tabs: myTabs,
          ),
        ),
        body: TabBarView(
          children: <Widget>\[
            Center(child: Text('全部订单')),
            Center(child: Text('已完成')),
            Center(child: Text('未完成'))
          \],
        ),
      ),
    );
  }
}

在这个例子中，我们使用DefaultTabController作为最外层的控制器，然后在AppBar的bottom属性中使用TabBar组件来显示Tab标签。TabBarView组件用于显示对应的页面内容。你可以根据自己的需求修改Tab标签的数量和内容。
#### 引用[.reference_title]
- *1* [Flutter实现Tabbar滑动](https://blog.csdn.net/BTTBHT/article/details/131046516)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [Flutter 实现TabBar的两种方式](https://blog.csdn.net/qq_39420519/article/details/103508058)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]