How do I remove the space lying between two containers in flutter?

Question

I want to draw a table widget in my screen. This is my code:

body: Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Container(
               padding: const EdgeInsets.all(10),
               alignment: Alignment.center,
               width: MediaQuery.of(context).size.width,
               decoration: BoxDecoration(
                   color: Colors.grey.shade400,
                   border: Border.all(
                       color: Colors.black, // Set border color
                       width: 1.5),   // Set border width
               ),
               child: const Text("EMPLOYEE DETAILS",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontFamily: 'Lobster')),
            ),     
            Container(
               margin: const EdgeInsets.all(20),
               alignment: Alignment.center,
               width: MediaQuery.of(context).size.width,
               decoration: BoxDecoration(
                   color: Colors.blue.shade300,
                   border: Border.all(
                       color: Colors.black, // Set border color
                       width: 1.0),   // Set border width
               ),
               child:Table(
                   border: TableBorder.all(
                       color: Colors.black,
                       style: BorderStyle.solid,
                       width: 2),
                   children: [
                       TableRow( children: [
                           Column(children:const [Text('Employee No')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Employee Name')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Designation')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Department')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('BU/Station')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                       TableRow( children: [
                           Column(children:const [Text('Qtr No')]),
                           Column(children:const [Text('NULL')]),
                       ]),
                  ],
            ),
         ),

Upon executing the code, I find that there's an unnecessary space between the two containers.

Why is the space there? How do I remove this space?

Answer 1

It is coming from the margin in the second container. If you want to remove the top margin of the container, use -

margin: const EdgeInsets.only(left: 20, right: 20, bottom: 20)

This will get you the desired output. Hope it's helpful.