Question 74778 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make the tab in flutter?

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.

enter image description here

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

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

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search