Question 77076 in Flutter Question posted in
The official Flutter documentation can be found here.

Remove whitespace between two ListView inside Column in Dialog – Flutter

I need to show two ListViews inside a dialog; I am using the showDialog function and in the "content" attribute I added a "SizedBox" without any value for the "height" attribute, and the lists are inside the Column object. Here is the code:

showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: SizedBox(
          width: double.maxFinite,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Text1'),
              Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: listOne.length,
                  itemBuilder: (context, index) {
                      return Text(listOne.elementAt(index).name);
                  },
                ),
              ),
              Text('Text 2'),
              Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: listTwo.length,
                  itemBuilder: (context, index) {
                      return Text(listTwo.elementAt(index).name);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );

I have already checked that the item count for both lists is correct.
Here is the result:
enter image description here

I want to remove the big whitespace between the two lists if it possibile.
Hope someone can help me.

Tags:

2

Answers


  1. 0

    The white space is coming for the Expanded widget trying to expand to full size extent of the screen for both lists. if you change the Expanded widget with Sizedbox and give it a height for both list it will remove the white space in between and after.

    I hope this helps

    Login or Signup to reply.
  2. 0

    Expanded: A widget that expands a child of a Row, Column, or Flex so
    that the child fills the available space.

    so by default it will expand fills the full height of screen.

    Workaround:

    change with Flexible widget:

    unlike Expanded, Flexible does not require the child to fill the available space.

    children: [
  Text('Text1'),
  Flexible(
    child: ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemCount: 3,
      itemBuilder: (context, index) {
          return Text('.name');
      },
    ),
  ),
  Text('Text 2'),
  Flexible(
    child: ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemCount: 4,
      itemBuilder: (context, index) {
          return Text('.name');
      },
    ),
  ),
],

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search