Question

注意：来自stackoverflow的关于此问题的解决方案未解决我的问题

我的完整代码

import 'package:flutter/material.dart';

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

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

class _BookingHistoryState extends State<BookingHistory> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
          length: 3,
          child: Scaffold(
            // backgroundColor: Colors.white,
            appBar: AppBar(

              flexibleSpace: Container(
                color: Colors.green,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    TabBar(indicatorColor: Colors.blue,
                      labelColor: Colors.red,
                      unselectedLabelColor: Colors.green,

                        tabs: [
                      Tab(
                        child: Text(
                          "Completed",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Tab(
                        child: Text(
                          "Requested",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Tab(
                        child: Text(
                          "Accepted",
                          style: TextStyle(color: Colors.white),
                        ),
                      )
                    ])
                  ],
                ),
              ),
            ),

            body: TabBarView(children: [
              Container(
                child: Center(
                  child: Text("i am tab 1"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("i am tab 2"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("i am tab 3"),
                ),
              )
            ]),
          )),
    );
  }
}

答案
为了使indicatorColor，labelColor或unselectedLabelColor生效，我们需要使用Material Widget（ Ravinder Kumar 建议的解决方案）包装Widget，或者如果我们只需要更改indicatorColor颜色，则使用{{1 }}颜色以 Accent 结尾（ Amazing Aidan 建议的解决方案）

Answer 1

在TabBar小部件中包装Material，

 Material(
                      color: Colors.green,
                    child:
                    TabBar(
                      indicatorColor: Colors.red,
                      labelColor: Colors.red,
                      unselectedLabelColor: Colors.green,
.....

输出：

完整代码

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

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

class _BookingHistoryState extends State<BookingHistory> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
          length: 3,
          child: Scaffold(
            // backgroundColor: Colors.white,
            appBar: AppBar(

              flexibleSpace: Container(
                color: Colors.green,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Material(
                      color: Colors.green,
                    child:
                    TabBar(
                      indicatorColor: Colors.red,
                      labelColor: Colors.red,
                      unselectedLabelColor: Colors.green,

                        tabs: [
                      Tab(
                        child: Text(
                          "Completed",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Tab(
                        child: Text(
                          "Requested",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Tab(
                        child: Text(
                          "Accepted",
                          style: TextStyle(color: Colors.white),
                        ),
                      )
                    ]))

                  ],
                ),
              ),
            ),

            body: TabBarView(children: [
              Container(
                child: Center(
                  child: Text("i am tab 1"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("i am tab 2"),
                ),
              ),
              Container(
                child: Center(
                  child: Text("i am tab 3"),
                ),
              )
            ]),
          )),
    );
  }
}

更新：奇怪的是，除了似乎可以使用的颜色以外，其他任何颜色都无法使用，例如使用indicatorColor: Colors.black,

Answer 2

很奇怪，将代码更改为

indicatorColor: Colors.blueAccent

有效但Colors.blue无效

Answer 3

Container中的AppBar不是必需的，而是直接在backgroundColor: Colors.green中设置AppBar。

然后在TabBar中正确设置indicatorColor，labelColor，unselectedLabelColor。

在每个Tab中，您无需指定TextStyle。它将覆盖labelColor中的unselectedLabelColor和TabBar。

AppBar(
  backgroundColor: Colors.green,
  flexibleSpace: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      TabBar(
          indicatorColor: Colors.white,
          labelColor: Colors.white,
          unselectedLabelColor: Colors.white70,
          tabs: [
            Tab(child: Text("Completed")),
            Tab(child: Text("Requested")),
            Tab(child: Text("Accepted"))
          ])
    ],
  ),
)

如何更改标签栏突出显示的颜色

3 个答案: