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

In Flutter, how to add a scrollable ListView in a flexible container so that the footer adapts its position?

I am trying to make the ListView container adapt to the content by keeping a footer right below the container and not on the bottom of the page :

  • many tiles : ListView will be scrollable and the footer on the bottom
  • few tiles : footer moves up to the bottom of the ListView.

As I can only manage to have a scrollable ListView when embedded in a Expanded widget, the footer always remains at the bottom of the screen.

illustration here

I tried many solutions, using Flexible widgets, ConstrainedBox in a LayoutBuilder… none of them worked

Tags:

2

Answers


  1. 0

    I have tried it with Stack and Column and it works. Try below code

         Stack(
          children: [
            SingleChildScrollView(
              child: Column(
                children: [
                  for (int i = 0; i < 20; i++)
                    Container(
                      color: Colors.orange,
                      height: 50,
                      width: double.infinity,
                      child: Center(child: Text('Item $i')),
                    ),
                ],
              ),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                padding: EdgeInsets.all(8.0),
                color: Colors.white,
                child: Center(child: Text('Footer')),
              ),
            ),
          ],
        ),
    Login or Signup to reply.
  2. 0

    enter image description here

      Widget buildBody() {
    final list = List.generate(5, (index) => index);
    return ListView.separated(
      itemBuilder: (_, i) {
        if (i == 0) {
          return Container(
            width: double.infinity,
            height: 35,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.green,
              border: Border.all(color: Colors.blue),
            ),
            child: Text("ListView Header", style: TextStyle(color: Colors.white)),
          );
        } else if (i == list.length + 1) {
          return Container(
            width: double.infinity,
            height: 35,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.green,
              border: Border.all(color: Colors.blue),
            ),
            child: Text("ListView Footer", style: TextStyle(color: Colors.white)),
          );
        }

        final title = "index_$i";
        return ListTile(title: Text(title));
      },
      separatorBuilder: (_, i) {
        return Divider(height: 1);
      },
      itemCount: list.length + 2,
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search