flutter add widgets on top and bottom to a listview

user_1068975 0
Viewed 13089

Trying to add some widgets to before of a listview.... I searched and found to use expanded like:

  return Scaffold(
    appBar: AppBar(
      title: Text('Test Listview'),
    ),
    body: Container(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          Text('header'),
          Expanded(
            child: ListView.builder(
              itemCount: providerApp.domains.length,
              itemBuilder: (BuildContext context, int index) {
                return Container( ......

But the issue here is that the Text('header') will be fixed, looking for some way where the the widget scrolls together with listview...

Thanks !!!

flutter
4 Answers

You can achieve this by using listview inside list view, below is sample code please check

enter image description here

 body: ListView(
    children: <Widget>[
      Container(
        height: 40,
        color: Colors.deepOrange,
        child: Center(
          child: Text(
            'Header',
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
        ),
      ),
      ListView.builder(
        physics: ScrollPhysics(),
        shrinkWrap: true,
        itemCount: 50,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.lime,
            height: 60,
            child: Center(
              child: Text(
                'Child $index',
                style: TextStyle(color: Colors.black, fontSize: 16),
              ),
            ),
          );
        },
      ),
      Container(
        height: 40,
        color: Colors.deepOrange,
        child: Center(
          child: Text(
            'Footer',
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
        ),
      ),
    ],
  ),
user_24512160 
body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: ListView(
     children: Widget[
       Container(
         width: MediaQuery.of(context).width,
         height: 50,
         alignment: AlignmentDirectional.center
         child: Text("HEADER")
      ),
      for(var i =0;i<providerApp.domains.length;i++)
      Container(
         width: MediaQuery.of(context).width,
         height: 50,
         alignment: AlignmentDirectional.center
         child: Text("Child $i")
      ),
      Container(
         width: MediaQuery.of(context).width,
         height: 50,
         alignment: AlignmentDirectional.center
         child: Text("Footer")
      )
    ]
  )
)
user_121637570

Try this.

body : Container(
      constraints: BoxConstraints.expand(),
      padding: const EdgeInsets.all(10.0),
      child : ListView.builder(
         itemCount : providerApp.domains.length + 1,
         itemBuilder : (BuildContext context, int index){
             Widget result;
             if(index == 0){
               result = Text("Header");
             }else{
               result = Container(..Your list item code here.);
             }
             return result;
         },
      ),
    )

PS: If you want add widget to bottom of list, condition is provider.domain.length + 1.

I hope to help you.

user_112961760

You should be returning ListTile not Container now and your tiles will be titled according to the ListTile title: property field where "providerapp.domains" is the list of strings.

Container(
            child: Column(children: <Widget>[
      Text('header'),
      ListView.builder(
        itemCount: providerApp.domains.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('${(providerApp.domains)[index]}'),
          );
        },
      ),
    ]),
)
user_76234910
Related