颤振中作为选项卡的ListView

我试图创建一个水平ListView作为我的TabBar视图的一种“控制器”。 我怎样才能做到，当我点击其中一个平面按钮时，它会改变选项卡。我可以根据按钮是否打开来更改按钮中的文本颜色吗

我的代码如下，我想要的是我添加的图片

代码：

import'包：Auszeit/services/Auszeit_icons_icons.dart'；
导入“package:Auszeit/widgets/auszeitDrawer.dart”；
导入“package:Auszeit/widgets/order/itemCard.dart”；
导入“包：cloud_firestore/cloud_firestore.dart”；
进口“包装：颤振/材料.省道”；
类OrderPage扩展StatefulWidget{
@凌驾
_OrderPageState createState（）=>\u OrderPageState（）；
}
类_OrderPageState扩展状态
使用SingleTickerProviderStateMixin{
@凌驾
小部件构建（构建上下文）{
TabController\u TabController；
ScrollController\u ScrollController；
@凌驾
void initState（）{
_tabController=tabController（vsync:this，长度：4）；
_scrollController=scrollController（）；
super.initState（）；
}
返回DefaultTabController(
长度：4，
孩子：脚手架(
浮动操作按钮：浮动操作按钮(
按下：（）{}，
标高：15，
子：图标(
图标、购物篮、，
颜色：颜色。绿色[800]，
),
背景颜色：Colors.white，
),
appBar:appBar(
海拔：0，
背景颜色：Colors.white，
主角：建筑商(
生成器：（上下文）{
返回图标按钮(
图标：图标(
图标菜单，
颜色：颜色。灰色，
),
onPressed:（）=>AuszeitDrawer.of（context.open（），
);
},
),
标题：正文(
“Auszeit eSG”，
样式：TextStyle(
颜色：颜色。绿色[800]，
fontWeight:fontWeight.bold，
),
),
),
主体：填充物(
padding:const EdgeInsets.fromLTRB（0,16,0,16），
子：列(
mainAxisAlignment:mainAxisAlignment.start，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
填充物(
填充：常量边集。对称（水平：20），
子：文本(
“贝斯泰伦”，
样式：TextStyle（fontSize:30，fontWeight:fontWeight.bold），
),
),
容器(
身高：50，
子：ListView(
控制器：\ u滚动控制器，
收缩膜：假，
滚动方向：轴水平，
儿童：[
扁平按钮(
按下：（）=>(选项卡controller.animateTo（1），
子：文本(
“BRÖTCHEN”，
样式：TextStyle(
fontFamily：“开放式SAN”，
颜色：颜色。绿色[800]，
fontWeight:fontWeight.bold，
尺寸:20),，
),
),
扁平按钮(
按下：（）=>(选项卡controller.animateTo（2），
子：文本(
“KALTGETRÄNKE”，
样式：TextStyle(
fontFamily：“开放式SAN”，
颜色：颜色。灰色，
fontWeight:fontWeight.bold，
尺寸:20),，
),
),
扁平按钮(
按下：（）=>(选项卡控制器。动画设置为（3），
子：文本(
“HEIßGETRÄNKE”，
样式：TextStyle(
fontFamily：“开放式SAN”，
颜色：颜色。灰色，
fontWeight:fontWeight.bold，
尺寸:20),，
),
),
扁平按钮(
按下：（）{}，
子：文本(
“密尔奇普罗杜克特”，
样式：TextStyle(
fontFamily：“开放式SAN”，
颜色：颜色。灰色，
fontWeight:fontWeight.bold，
尺寸:20),，
),
)
],
),
),
扩大(
孩子：填充(
填充：LTRB（20,20,20,30）中的常数边集，
子项：选项卡视图（控制器：\选项卡控制器，子项：[
类别选项卡（catId:“1”），
类别选项卡（catId:“2”），
类别选项卡（catId:“3”），
类别选项卡（catId:“4”），
]),
),
),
],
),
),
));
}
}
类CategoryTab扩展了无状态小部件{
最终字符串catId；
const CategoryTab（{Key-Key，@required this.catId}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回流生成器(
流：Firestore.instance
.collection（'项目'）
.其中（'catid'，isEqualTo:catid）
.snapshots（），
生成器：（上下文，异步快照）{
if（snapshot.hasData）{
返回GridView.builder(
gridDelegate：
import 'package:Auszeit/services/auszeit_icons_icons.dart';
import 'package:Auszeit/widgets/auszeitDrawer.dart';
import 'package:Auszeit/widgets/order/itemCard.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class OrderPage extends StatefulWidget {
  @override
  _OrderPageState createState() => _OrderPageState();
}

class _OrderPageState extends State<OrderPage>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    TabController _tabController;
    ScrollController _scrollController;

    @override
    void initState() {
      _tabController = TabController(vsync: this, length: 4);
      _scrollController = ScrollController();
      super.initState();
    }

    return DefaultTabController(
        length: 4,
        child: Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            elevation: 15,
            child: Icon(
              Icons.shopping_basket,
              color: Colors.green[800],
            ),
            backgroundColor: Colors.white,
          ),
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.white,
            leading: Builder(
              builder: (context) {
                return IconButton(
                  icon: Icon(
                    Icons.menu,
                    color: Colors.grey,
                  ),
                  onPressed: () => AuszeitDrawer.of(context).open(),
                );
              },
            ),
            title: Text(
              "Auszeit eSG",
              style: TextStyle(
                color: Colors.green[800],
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          body: Padding(
            padding: const EdgeInsets.fromLTRB(0, 16, 0, 16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: Text(
                    "Bestellen",
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
                  ),
                ),
                Container(
                  height: 50,
                  child: ListView(
                    controller: _scrollController,
                    shrinkWrap: false,
                    scrollDirection: Axis.horizontal,
                    children: <Widget>[
                      FlatButton(
                        onPressed: () => _tabController.animateTo(1),
                        child: Text(
                          "BRÖTCHEN",
                          style: TextStyle(
                              fontFamily: "Open Sans",
                              color: Colors.green[800],
                              fontWeight: FontWeight.bold,
                              fontSize: 20),
                        ),
                      ),
                      FlatButton(
                        onPressed: () => _tabController.animateTo(2),
                        child: Text(
                          "KALTGETRÄNKE",
                          style: TextStyle(
                              fontFamily: "Open Sans",
                              color: Colors.grey,
                              fontWeight: FontWeight.bold,
                              fontSize: 20),
                        ),
                      ),
                      FlatButton(
                        onPressed: () => _tabController.animateTo(3),
                        child: Text(
                          "HEIßGETRÄNKE",
                          style: TextStyle(
                              fontFamily: "Open Sans",
                              color: Colors.grey,
                              fontWeight: FontWeight.bold,
                              fontSize: 20),
                        ),
                      ),
                      FlatButton(
                        onPressed: () {},
                        child: Text(
                          "MILCHPRODUKTE",
                          style: TextStyle(
                              fontFamily: "Open Sans",
                              color: Colors.grey,
                              fontWeight: FontWeight.bold,
                              fontSize: 20),
                        ),
                      )
                    ],
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(20, 20, 20, 30),
                    child: TabBarView(controller: _tabController, children: [
                      CategoryTab(catId: "1"),
                      CategoryTab(catId: "2"),
                      CategoryTab(catId: "3"),
                      CategoryTab(catId: "4"),
                    ]),
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

class CategoryTab extends StatelessWidget {
  final String catId;

  const CategoryTab({Key key, @required this.catId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: Firestore.instance
            .collection('items')
            .where('catid', isEqualTo: catId)
            .snapshots(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasData) {
            return GridView.builder(
              gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
              shrinkWrap: true,
              itemCount: snapshot.data.documents.length,
              itemBuilder: (BuildContext context, int index) {
                return ItemCard(
                  cost: snapshot.data.documents[index]["cost"] == null
                      ? 1
                      : snapshot.data.documents[index]["cost"],
                  name: snapshot.data.documents[index]["name"],
                  desc: snapshot.data.documents[index]["desc"] == null
                      ? "Keine Beschreibung vorhanden"
                      : snapshot.data.documents[index]["desc"],
                  imageUrl: snapshot.data.documents[index]["image_path"],
                );
              },
            );
          } else {
            return Container(
                height: 50, width: 50, child: CircularProgressIndicator());
          }
        });
  }
}

import 'package:flutter/material.dart';

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar>
    with SingleTickerProviderStateMixin {
  // define your tab controller here
  TabController _tabController;

  @override
  void initState() {
    // initialise your tab controller here
    _tabController = TabController(length: 4, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(
          Icons.menu,
          color: Colors.black,
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text(
          'Aszeit eSG',
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
            child: TabBar(
              controller: _tabController,
              labelColor: Colors.green,
              isScrollable: true,
              indicatorColor: Colors.transparent,
              unselectedLabelColor: Colors.grey,
              unselectedLabelStyle: TextStyle(
                fontSize: 16,
                color: Colors.grey,
                fontWeight: FontWeight.w700,
              ),
              labelStyle: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w700,
              ),
              tabs: <Widget>[
                Text('BROTCHEN'),
                Text('KALTEGETRANKE'),
                Text('HEIBGETRANKE'),
                Text('MILCHPPODUKE'),
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                Center(
                  child: Text(
                    'BROTCHEN',
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                  ),
                ),
                Center(
                  child: Text(
                    'KALTEGETRANKE',
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                  ),
                ),
                Center(
                  child: Text(
                    'HEIBGETRANKE',
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                  ),
                ),
                Center(
                  child: Text(
                    'MILCHPPODUKE',
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.w600),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}