如何在颤动中更改所选选项卡的背景颜色

Question

我想更改所选标签的背景，我将拥有自定义标签，因此我无法使用指示器更改所选标签的背景：BoxDecoration

我想实现这样的标签栏

请指导我在设计中实现标签栏。我刚开始学习颤振。

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),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

如何在颤动中更改所选选项卡的背景颜色

How to change the selected tab background colours in flutter

tabs

tabbarcontroller

flutter

flutter-layout