CODEWITHSUNDEEP
flutterdart
dartKnightRises
dartKnightRises

Reputation: 905

Provide some extra space at the end of ListView.builder

enter image description here Below is my code, I want to add some extra space of height 50, which comes at the end of list item. because when my second child of stack appears it nearly overlaps the last item of list view. I've tried wrapping ListView.builder with column and added a container at last but destroyed my whole structure. for this scenario I've to wrap the column into Single scrollable which pushed stack 2nd widget to be at the end of ListItem.(But I don't want Stack 2nd object to be scrollable). As you can see I'm not able to click on HotDog.

 body: Stack(
        children: <Widget>[
          ListView.builder(
                  itemCount: itemData.length,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                 itemBuilder: (BuildContext context,int index){ 
                   return Text(data[index].name);
 }

                     ),

          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.cyan
              ),
              padding: EdgeInsets.all(10),
              height: 60,

            ),
          )
        ],
      ),

Upvotes: 5

Views: 8797

Answers (5)

Mohʌɱɱʌɗ
Mohʌɱɱʌɗ

Reputation: 351

This can be easily done by adding bottom padding in listview.builder

Expanded(
        child: ListView.builder(
          padding: EdgeInsets.only(bottom: 100), //Increase this as per your requirment
          itemCount: 5,
          itemBuilder: (cxt , idx) {
           return YourWidget();
          }

Upvotes: 13

CoderUni
CoderUni

Reputation: 6134

Since you're listview.builder is inside a stack, you simply use the Positioned widget for this. Simply wrap your listview with Positioned like below:

Positioned(
 bottom:50, //adjust this since this is the padding inside the stack
  child:Container(
width:MediaQuery.of(context).size.width //width of the whole phone
child: ListView.builder(
          itemCount: itemData.length,
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
         itemBuilder: (BuildContext context,int index){ 
           return Text(data[index].name);
    }
  ),
 ),
),

To ensure your Container stays at the bottom wrap it with a positioned widget and set the bottom property to 0:

Positioned(
 bottom:0, //adjust this since this is the padding inside the stack
  child:Container(),
),

Here is a one minute clip showing how to use the Positioned widget: https://www.youtube.com/watch?v=EgtPleVwxBQ

Upvotes: 1

Jitesh Mohite
Jitesh Mohite

Reputation: 34170

ListViewBuilder should be wrap inside Expanded widget which will take fullscreen and give container bottom width as per need.

Example:

var itemData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.only(bottom: 20),
                      child: ListView.builder(
                          itemCount: itemData.length,
                          shrinkWrap: true,
                          scrollDirection: Axis.vertical,
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                                height: 80,
                                child: Text("Text :" + index.toString()));
                          }),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.cyan),
                        padding: EdgeInsets.all(10),
                        height: 60,
                      ),
                    ),
                  )
                ],
              ),
            ],


 ),

Output:

enter image description here

Upvotes: 4

Guru Prasad mohapatra
Guru Prasad mohapatra

Reputation: 1969

There is no specific way to do it by default you have to do it manually with own logic

          ListView.builder(
                  itemCount: itemData.length,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                 itemBuilder: (BuildContext context,int index){ 
                   if(index == itemData.length - 1 )
                     return Padding(

                      padding: EdgeInsets.only(bottom : 50),
                      child : Text(data[index].name)
                   );
                   return Text(data[index].name);
                 }),

Upvotes: 0

KuKu
KuKu

Reputation: 7492

How about you add empty last item like below code?

          ListView.builder(
                  itemCount: itemData.length + 1,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                 itemBuilder: (BuildContext context,int index){
                   if (index == item.Data.length) {
                       return SizedBox(height: 50);
                   } else {
                       return Text(data[index].name);
                   }
                 }
            ),

Upvotes: 9

Related Questions