Search code examples
flutterdartwidgetspace

How to remove space between widget inside column - Flutter


I have simple screen that contains of 2 widget and I wrap it using Column, but there is always small space between first widget and second widget. Is there a way to remove space in Column. here is the picture that I would like to remove the space: enter image description here

and here is the code:

Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    width: cardWidth,
                    height: cardHeight,
                    child: Card(
                      // color: Colors.transparent,
                      shape: RoundedRectangleBorder(
                        side: BorderSide(color: Colors.white70, width: 1),
                        borderRadius: BorderRadius.circular(20),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
                        child: Container(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              ...
                              
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                  Container(
                    width: sizeWidth - 135,
                    height: noteHeight,
                    child: Center(
                      child: Text("hi.."),
                    ),
                    decoration: BoxDecoration(
                        color: noteAuth,
                        border: Border.all(
                          color: noteAuth,
                        ),
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(15),
                            bottomRight: Radius.circular(15))),
                  )
                ],
              ),

Solution

  • Your parent layout color and container color are both same then you use card and give padding and it takes some space.

    Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: double.infinity,
                  color: Colors.red, // here you change your color
                 // height: cardHeight,
                  child: Card(
                    // color: Colors.transparent,
                    shape: RoundedRectangleBorder(
                      side: BorderSide(color: Colors.white70, width: 1),
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
                      child: Container(
    
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
    
    
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: double.infinity - 135,
               //   height: noteHeight,
                  child: Center(
                    child: Text("hi.."),
                  ),
                  decoration: BoxDecoration(
                      color: Colors.yellow,
                      border: Border.all(
                        color: Colors.green,
                      ),
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(15),
                          bottomRight: Radius.circular(15))),
                )
              ],
            )
    

    Output:

    enter image description here