How to make the tab in flutter?

Question

I want to make this design using tab in flutter. But when I'm trying to make it using tab controller but when we not select another one then it's background should be grey I'm trying it but it is not working. So, you can help me in this.

Answer 1

For the best explanation and example take a look at the official Flutter cookbook on how to work with tabs and tab controllers.

https://docs.flutter.dev/cookbook/design/tabs

Answer 2

Use this Page

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin{


  late TabController controller;

  @override
  void initState() {
    controller = TabController(
      initialIndex: 0,
      length: 2,
      vsync: this,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.teal,
        ),
        body: Column(
          children: [
            TabBar(
              controller: controller,
              isScrollable: true,
              labelColor: Colors.white,
              unselectedLabelColor: Colors.grey,
              splashBorderRadius: BorderRadius.circular(50),
              padding: const EdgeInsets.all(8),
              labelStyle: const TextStyle(fontSize: 16,fontWeight: FontWeight.bold),
              indicator: const BoxDecoration(
                color: Colors.teal,
                borderRadius: BorderRadius.all(Radius.circular(50)),
              ),
              tabs: const [
                SizedBox(
                  width: 100,
                  child: Tab(
                    text: "Gainer",
                  ),
                ),
                SizedBox(
                  width: 100,
                  child: Tab(
                    text: "Loser",
                  ),
                ),
              ],
            ),
            Expanded(
              child: TabBarView(
                controller: controller,
                children: const[
                  Center(
                    child: Text("Gainer"),
                  ),
                  Center(
                    child: Text("Loser"),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}