[flutter]: How to make the color of a Container() fill whole area in a tab of TabBar()?

Question

I am trying to implement a TabBar with tabs having different background colors. Tabs are hosting Container() widgets with different decoration colors. The problem is the background color does not fill whole tab area. Below is the code snippet:

class Changes extends StatelessWidget {
  Changes({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 75,
        foregroundColor: Colors.yellowAccent[400],
        backgroundColor: Colors.grey[900],
        centerTitle: true,
        title: Text('Hello'),
      ),
      body: DefaultTabController(
        length: 2,
        child: Column(
          children: [
            TabBar(
              tabs: [
                Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.lightGreenAccent,
                        Colors.green
                      ]
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * 0.05,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Up',
                        style: TextStyle(
                          color: Colors.grey[900],
                          fontSize: 22
                      )),
                      SizedBox(width: 15),
                      Icon(Icons.arrow_upward, color: Colors.grey[900]),
                    ],
                  ),
                ),
                Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.red,
                          Colors.deepOrangeAccent
                        ]
                    ),
                  ),
                  height: MediaQuery.of(context).size.height * 0.05,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Down',
                          style: TextStyle(
                              color: Colors.grey[900],
                              fontSize: 22
                          )),
                      SizedBox(width: 15),
                      Icon(Icons.arrow_downward, color: Colors.grey[900]),
                    ],
                  ),
                ),
              ]),
            Expanded(
              child: TabBarView(
                children: [
                  Container(
                    child: Center(child: Text('Up')),
                  ),
                  Container(
                    child: Center(child: Text('Down')),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The screen looks like this:

Screen

How can I solve this problem? Why color of BoxDecoration() not fills whole tab space?

Answer 1

Hello the answer is really simple for that part.. you need to add:

 TabBar(
 labelPadding: EdgeInsets.zero, // this line
 tabs: [])

Kindly upvote if it helped.