Can I have an idea for Tabber in Flutter?

Question

I have no idea How to make Tab bar like This in my flutter web

Can I have an idea or How call This pattern.

Example video: https://youtu.be/A3ttwYljg_8

Answer 1

You just have to give body to TabBarView, rest will be taken care by flutter itself.

Sample Code : -

TabBarView(
  children: <Widget>[
  Tabbar 1 body ...., //1st index, 1st tab
  Tabbar 2 body ...., //2nd index, 2nd tab
  Tabbar 3 body ...., //...
  Tabbar 4 body ...., //...
  Tabbar 5 body ....  //...
  ]
)

TabBarView

Complete Code : -

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatefulWidget {
  const MyStatelessWidget({super.key});

  @override
  State<MyStatelessWidget> createState() => _MyStatelessWidgetState();
}

class _MyStatelessWidgetState extends State<MyStatelessWidget> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: const Color.fromARGB(255, 107, 179, 234),
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            labelColor: Colors.black,
            indicator: BoxDecoration(color: Colors.yellow),
            labelPadding: EdgeInsets.only(bottom: 5),
            indicatorPadding:
                EdgeInsets.only(left: 30, right: 30, bottom: 10, top: 5),
            tabs: <Widget>[
              SizedBox(
                width: 70,
                height: 40,
                child: Center(
                  child: Tab(
                    text: "Tab 1",
                  ),
                ),
              ),
              SizedBox(
                width: 70,
                height: 40,
                child: Tab(
                  text: "Tab 2",
                ),
              ),
              SizedBox(
                width: 70,
                height: 40,
                child: Tab(
                  text: "Tab 3",
                ),
              ),
              SizedBox(
                width: 70,
                height: 40,
                child: Tab(
                  text: "Tab 4",
                ),
              ),
              SizedBox(
                width: 70,
                height: 40,
                child: Tab(
                  text: "Tab 5",
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: Colors.red,
                )),
                Expanded(
                    child: Container(
                  color: Colors.purple,
                ))
              ],
            ),
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: const Color.fromARGB(255, 9, 79, 135),
                )),
                Expanded(
                    child: Container(
                  color: Colors.purple,
                ))
              ],
            ),
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: const Color.fromARGB(255, 144, 255, 54),
                )),
                Expanded(
                    child: Container(
                  color: Colors.purple,
                ))
              ],
            ),
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: const Color.fromARGB(255, 109, 40, 36),
                )),
                Expanded(
                    child: Container(
                  color: Colors.yellow,
                ))
              ],
            ),
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: Colors.green,
                )),
                Expanded(
                    child: Container(
                  color: Colors.yellow,
                ))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Output :-