Bar How can we customize the with of a Tab widget from TabBar widget

Question

I am makeing a clone of whatsapp. So i need to customize the Tab width as the camera icon width is less than other in whatsapp.

I want to design this like:

Answer 1

I got what you want to achieve. You need to set the isScrollable: true if you want tabs of different sizes. Additionally, to take full spacing controls we will also set the labelPadding to zero. To render the child with different widths we will simply use the screen size to determine the size.

          TabBar(
            isScrollable: true,
            controller: tabController,
            labelPadding: EdgeInsets.zero,
            tabs: [1, 2, 3, 4].map((e) {
              return SizedBox(
                width: (e == 1 ? 0.1 : 0.3) * MediaQuery.of(context).size.width,
                child: Tab(
                  iconMargin: EdgeInsets.zero,
                  child: Text(
                    e.toString(),
                    style: const TextStyle(color: Colors.black),
                  ),
                ),
              );
            }).toList(),
          )

This code will generate the output you are expecting. You can design the tabs accordingly.