CODEWITHSUNDEEP
flutterdartwidgetspace
wahyu
wahyu

Reputation: 2415

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))),
                  )
                ],
              ),

Upvotes: 3

Views: 4681

Answers (3)

Opshanka Prabath
Opshanka Prabath

Reputation: 31

mainAxisAlignment: MainAxisAlignment.center

Upvotes: -1

Jahidul Islam
Jahidul Islam

Reputation: 12595

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

Upvotes: 2

KHAL
KHAL

Reputation: 337

edit the margin of the Card widget

            Container(
              width: double.infinity,
              color: Colors.red, // here you change your color
             // height: cardHeight,
              child: Card(
                // color: Colors.transparent,
                margin: EdgeInsets.all(0), //************* Here ********************
                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: [

                      ],
                    ),
                  ),
                ),
              ),
            ),

Upvotes: 0

Related Questions