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

Flutter – How I move my footer widget to the bottom of page inside list view?

I tried flutter web, and I want achieve this layout:

Column

  • Navbar
  • ListView
    • Text
    • ListView builder
    • Footer

It works fine when the listview builder item is enough to make the page scrollable, but when there are only a few items, my footer is not placed at the bottom of the page, any idea to achieve this?

here I include sample code to visualize what I tried to achieve (change the itemCount to 100 for scrollable, and itemCount = 5 is the problem -> green bar stay at the bottom when not scrollable)

return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children:[
          Container(
          height: 50, color:Colors.red),
          SizedBox(height: 30),
          Expanded(
            child: ListView(
              children:[
                ListView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index)=>Container(height: 10, color: index.isOdd?Colors.blue:Colors.red),
                  itemCount: 5
                ),
                SizedBox(height: 30),
                Container(height: 50, color: Colors.green)
              ]
            ),
          )
        ]
      )
    );
Tags:

2

Answers


  1. 0

    I don’t know if it works in flutter web, but have you tried putting it inside the Scaffold’s bottomNavigationBar property? or you can even use a Stack and position the widget with Positioned at the bottom.

    Login or Signup to reply.
  2. 0

    The Scaffold widget in flutter has a property called a CustomScrollView so Instead of user a column and multiple listviews your code would look like this

    Scaffold(
    backgroundColor: Colors.white,
    body: CustomScrollView(
      slivers: [
        const SliverAppBar(
          toolbarHeight: 50,
          backgroundColor: Colors.red,
        ),
        SliverToBoxAdapter(child: SizedBox(height: 30)),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                height: 50,
                color: index.isOdd ? Colors.blue : Colors.red,
                child: Center(
                  child: Text(
                    index.toString(),
                  ),
                ),
              );
            },
            childCount: 100,
          ),
        ),
        SliverToBoxAdapter(
            child: Container(height: 50, color: Colors.green)),
      ],
    ),
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search