如何更改 flutter 中選定的選項卡背景顏色

Question

我想更改所選標簽的背景，我將擁有自定義標簽，因此我無法使用指示器更改所選標簽的背景：BoxDecoration

我想實現這樣的標簽欄

請指導我在設計中實現標簽欄。 我剛開始學習 flutter。

Answer 1

這是你想要的？

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample>
    with SingleTickerProviderStateMixin {
  // Define a tab controller object
  TabController _tabController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.grey[300],
          child: TabBar(
            controller: _tabController,
            indicatorColor: Colors.transparent,
            labelColor: Colors.pink,
            unselectedLabelColor: Colors.grey,
            labelStyle: TextStyle(
              fontSize: 16,
            ),
            unselectedLabelStyle: TextStyle(
              fontSize: 16,
            ),
            indicator: BoxDecoration(
              color: Colors.white,
            ),
            tabs: <Widget>[
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 1'),
                    Text(
                      'Investment',
                      style: TextStyle(
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 2'),
                    Text(
                      'Investment',
                      style: TextStyle(fontSize: 12),
                    ),
                  ],
                ),
              ),
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 3'),
                    Text(
                      'Investment',
                      style: TextStyle(fontSize: 12),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

OUTPUT：

Answer 2

對於未選擇的標簽顏色：用 ColoredBox 包裹並給出您的顏色。

對於選定的選項卡顏色：給一個 BoxDecoration 以您所需的顏色作為指示器。

ColoredBox(
 /// Unselected tab color
 color: Colors.black,
 child: TabBar(
   /// Selected tab color
   indicator: BoxDecoration(color: Colors.white),
   tabs: const [
     Tab(text: 'A'),
     Tab(text: 'B'),
    ],
   ),
 )