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

Flutter Layout: Listview inside Row flexible height inside SingleChildScrollView

[EDIT Solution]: there was a missing expanded around the ListView that was causing problems and errors. Thanks to all for your valuable inputs and Happy Easter!

I am trying to obtain a layout as in the below image.
Inside a SingleChildScrollview, I have an overall row with two children inside:

  1. A list of widgets [it can be a listview or a for(int i=0;i<…;i++) widget() ] whose height is unknown ant that it should take all the available width
  2. A single button that should be vertically centered and taking as little space as possible.

Desired Layout

I have been trying out different solutions but I run in errors over errors as everything is inside a SingleChildScrollView and Expanded Widgets require a fixed height, which I don’t have as I don’t know the height of the list of widgets and IntrinsicHeight doesn’t seem to work.

I also bumped into the boxy package ( https://pub.dev/documentation/boxy/latest/ ) which helped to solve to vertically center the iconbutton but there is still the problem about the list of widgets taking as much width as possible.

Recap of nested widgets

SingleChildScrollView(
 child: Column(
  children: [ ...,
   Row(
    children:[
     List of widgets, //should be taking as much width as possible but height is unknown
     IconButton() //should be vertically centered taking as little width as possible
     ]
    )
   ]
  )
)

Can anyone kindly help me?

Thanks a lot in advance and happy Easter

Tags:

2

Answers


  1. 0

    if it’s a list without many items, you can use an expanded together with shrinkWrap as true in the list, check if it’s something like that you want

    SingleChildScrollView(
    child: Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: ListView(
                shrinkWrap: true,
                children: [
                  Container(color: Colors.black, child: ListTile()),
                  Container(color: Colors.blue, child: ListTile()),
                  Container(color: Colors.yellow, child: ListTile()),
                  Container(color: Colors.black, child: ListTile()),
                  Container(color: Colors.grey, child: ListTile()),
                ],
              ),
            ),
            Center(
              child: IconButton(
                onPressed: (() {}),
                icon: const Icon(Icons.add),
              ),
            )
          ],
        )
      ],
    ),
  )
    Login or Signup to reply.
  2. 0

    Simply wrap your ListView in Expanded. You don’t need SingleChildScrollView, since ListView handles the scrolling.

    Row(
  children: [
    Expanded(
      child: ListView(
        children: [
          for(int i = 1; i < 20; i++)
            ListTile(
              title: Text('Item $i'),
            ),
        ],
      ),
    ),
    IconButton(onPressed: () {}, icon: const Icon(Icons.add)),
  ],
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search