Flutter: Custom Tab Bar Widget

main.dart

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: MyStatefulWidget(),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Widget'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 150.0,
          vertical: 50.0,
        ),
        child: Column(
          children: [
            const SizedBox(height: 100),
            SizedBox(
              height: 45,
              child: Material(
                color: Colors.blue,
                child: TabBar(
                  controller: _tabController,
                  labelColor: Colors.white,
                  unselectedLabelColor: Colors.grey.shade200,
                  overlayColor: MaterialStateProperty.all(Colors.amber),
                  indicatorColor: Colors.black,
                  indicatorWeight: 6.0,
                  tabs: const <Widget>[
                    Tab(
                      icon: Icon(Icons.cloud_outlined),
                    ),
                    Tab(
                      icon: Icon(Icons.beach_access_sharp),
                    ),
                    Tab(
                      icon: Icon(Icons.brightness_5_sharp),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: <Widget>[
                  Column(
                    children: const [
                      Expanded(
                        child: Card(
                          color: Colors.red,
                          child: Center(
                            child: Text("It's partly cloudy here"),
                          ),
                        ),
                      ),
                      Expanded(
                        child: Card(
                          color: Colors.green,
                          child: Center(child: Text("It's cloudy here")),
                        ),
                      ),
                    ],
                  ),
                  const Center(
                    child: Text("It's rainy here"),
                  ),
                  const Center(
                    child: Text("It's sunny here"),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}