How to add static widget at end of listview builder flutter

Hi there, we often need to add a static widget at the end of the listview build to make a footer, to make one Widget stand out, or for some other purpose.

So it’s too easy just a party of standard Logic. In this quick tutorial, I will give some steps and an example code.

How to add a static widget at the end of the ListView builder flutter

Here are the steps:

• Create the ListBulder
• Create Condition in If(index == [yourWidgetList].length – 1)
• Then Return your Footer widget
• Else Return rest of the top Widgets

Example Code:

Here I created one list which I wanted to show with the list view, Builder

     List listTiles = ["A", "B", "C", "Footer"];

Now using that list With ListView builder

//Code
ListView.builder(
          itemCount: listTiles.length,
          itemBuilder: (context, index) {
            if (index == listTiles.length - 1) {
              return Container(
                padding: const EdgeInsets.symmetric(vertical: 20.0),
                margin: const EdgeInsets.symmetric(vertical: 10.0),
                color: Colors.red,
                child: Center(
                  child: Text(listTiles[index]),
                ),
              );
            } else {
              return Container(
                padding: const EdgeInsets.symmetric(vertical: 20.0),
                margin: const EdgeInsets.symmetric(vertical: 10.0),
                color: Colors.greenAccent,
                child: Center(
                  child: Text(listTiles[index]),
                ),
              );
            }
          },
        ),

How to add a static widget at the Start of the ListView builder flutter

It’s Super Simple as well we just need to add some changes in the Condition in the itemBuilder method,

 List listTiles = ["Header", "B", "C", "Footer"];

Here is the new List where I added Header at the 0 index of the list and now In the ItemBuilder method we need to check the index with Zero if (index == 0).

ListView.builder(
          itemCount: listTiles.length,
          itemBuilder: (context, index) {
            if (index == 0) {
              return Container(
                padding: const EdgeInsets.symmetric(vertical: 20.0),
                margin: const EdgeInsets.symmetric(vertical: 10.0),
                color: Colors.red,
                child: Center(
                  child: Text(listTiles[index]),
                ),
              );
            } else {
              return Container(
                padding: const EdgeInsets.symmetric(vertical: 20.0),
                margin: const EdgeInsets.symmetric(vertical: 10.0),
                color: Colors.greenAccent,
                child: Center(
                  child: Text(listTiles[index]),
                ),
              );
            }
          },
        ),

How to add a static widget at the end of the Normal ListView flutter

Here are some steps

• First Add LsitView to your code, Make its children
• Create one Nested Listview Builder For the rest of the Listview elements.
• Make sure to add Property – (Physics: ScrollPhysics(), shrinkWrap: true) To ListView builder
• Below that listView builder Create the Footer widget(Container).
• Wrap the ListView Builder and Footer widget in the children of the First created ListView
• Below is the Example Code for this

Now I Crested the List of the Rest of the Widgets And the footer Widget was Created Separately

    List listTiles = ["A", "B", "C", "C"];

 ListView(
          children: <Widget>[

            //Rest of the elements
            ListView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              itemCount: listTiles.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: Colors.green,
                  height: 60,
                  child: Center(
                    child: Text(
                      '${listTiles[index]}',
                      style: const TextStyle(color: Colors.black, fontSize: 16),
                    ),
                  ),
                );
              },
            ),

            //Footer widget or other Static Widget after list view
            Container(
              height: 40,
              color: Colors.redAccent,
              child:  const Center(
                child: Text(
                  'Footer',
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ),
          ],
        ),

How to add Static Widget at the Beginning and the End of the list view

Now let’s create a header and footer Both With simple ListView. Here is the example code For that

List listTiles = ["A", "B", "C", "C"];

     body: ListView(
          children: <Widget>[

           //Header
            Container(
              height: 40,
              color: Colors.redAccent,
              child:  const Center(
                child: Text(
                  'Header',
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ),

            //Rest of the elements
            ListView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              itemCount: listTiles.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: Colors.green,
                  height: 60,
                  child: Center(
                    child: Text(
                      '${listTiles[index]}',
                      style: const TextStyle(color: Colors.black, fontSize: 16),
                    ),
                  ),
                );
              },
            ),
            //Footer widget or other Static Widget after list view
            Container(
              height: 40,
              color: Colors.redAccent,
              child:  const Center(
                child: Text(
                  'Footer',
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ),
          ],
        ),

Here’s How all methods to Play with ListView.

Thank You for reading

---

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com