Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How can I remove a gap between my Column children?

I have a Flutter screen that is built with the code below. I expected the ListView widget and the Row widget to have no space between them. But the code produces the results shown in the screen capture instead. How do I get rid of the gap between the two widgets?

  Material(
    color: const Color.fromARGB(128, 0, 0, 0),
    child: Padding(
      padding: const EdgeInsets.only(top: 56.0, right: 150.0),
      child: Column(
        children: [
          Container(
            height: 40,
            color: Colors.white,
            child: Row(
              children: const [
                Padding(
                  padding: EdgeInsets.only(left: 16.0),
                  child: Text('Select a new grocery list:'),
                ), // Padding
              ],
            ), // Row
          ), // Container
          ListView.builder(
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return Container(
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(color: Colors.grey.shade700),
                      ), // Border
                    ), //BoxDecoration
                    child: ListTile(
                      visualDensity: VisualDensity.compact,
                      title: Text(groceryListNames[index]),
                      textColor: Constants.kDarkBlueTextColor,
                      tileColor: Colors.white,
                      onTap: () {
                        Navigator.pop(context, groceryListNames[index]);
                      },
                    ), // ListTile
                  ); // Container
                },
                itemCount: groceryListNames.length),
        ],
      ), // Column
    ), // Padding
  ), // Material

Screen Capture

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Add the property padding: EdgeInsets.zero to your ListView.builder() to remove unwanted paddings:

ListView.builder(
  padding: EdgeInsets.zero,
);

Or

Use ListView.builder() as the child of MediaQuery.removePadding to remove any top padding applied by the device or system:

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView.builder(),
);
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading