reusable custom navbar with indicator using flutter_bloc as state managent

custom_navbar.dart

import 'package:fdis/bloc/tab_bloc/tab_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class CustomTabBar extends StatelessWidget {
  const CustomTabBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<TabBloc, TabState>(
      builder: (context, state) {
        return Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: listOfTabs
                    .asMap()
                    .map((k, v) {
                      return MapEntry(
                          k,
                          GestureDetector(
                            onTap: () {
                              BlocProvider.of<TabBloc>(context)
                                  .add(TabEvent(index: k));
                            },
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  LayoutBuilder(builder: (BuildContext context,
                                      BoxConstraints constraints) {
                                    return AnimatedContainer(
                                      margin: const EdgeInsets.symmetric(
                                          horizontal: 10),
                                      duration: Duration(milliseconds: 200),
                                      color: state.index == k
                                          ? Colors.black
                                          : Colors.transparent,
                                      height: 5,
                                      width: MediaQuery.of(context).size.width *
                                          0.09,
                                    );
                                  }),
                                  SizedBox(
                                      height:
                                          MediaQuery.of(context).size.height *
                                              0.004),
                                  v.icon,
                                  SizedBox(
                                      height:
                                          MediaQuery.of(context).size.height *
                                              0.002),
                                  Text(
                                    v.label,
                                    style: TextStyle(
                                        fontSize: 10,
                                        color: state.index == k
                                            ? Colors.black
                                            : Colors.grey),
                                  )
                                ]),
                          ));
                    })
                    .values
                    .toList(),
              ),
            ],
          ),
        );
      },
    );
  }
}

var listOfTabs = [
  TabData(
    label: "Audit",
    icon: Icon(Icons.home_outlined),
  ),
  TabData(
    label: "Settings",
    icon: Icon(Icons.settings_outlined),
  ),
  TabData(
    label: "Help",
    icon: Icon(Icons.info_outline),
  )
];

class TabData {
  final String label;
  final Icon icon;

  TabData({
    required this.label,
    required this.icon,
  });
}