CODEWITHSUNDEEP
flutter
Vipin Dubey
Vipin Dubey

Reputation: 409

How to put Expandable list view inside scroll view in flutter?

Hello there i am making a flutter application in which inside ScrollView in need to put Expandable list view.First of all here is my build method.

  return Scaffold(   
    appBar: AppBar(  
      backgroundColor: app_color,
      iconTheme: IconThemeData(  
        color: Colors.white, //change your color here 
      )),   
    //debugShowCheckedModeBanner: false,
    //key: scaffoldKey,    
    backgroundColor: app_color,
  body: SingleChildScrollView(  
    child: Container(  
      child: Column(  
        mainAxisAlignment: MainAxisAlignment.spaceBetween,  
        children:<Widget>[  
          Text("Header"),  
          new ListView.builder(  
            itemCount: datas.length,  
            shrinkWrap: true,  
            itemBuilder: (context, i) {  
              return new ExpansionTile(  
                title: new Text(datas[i].title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold,                                 fontStyle: FontStyle.italic),),  
                children: <Widget>[  
                  new Column(  
                    children: _buildExpandableContent(datas[i]),  
                  ),  
                ],  
              );  
            },  
          ),  
          Text("Footer"),  
        ],  
      ),  
    )  
  )

);  
  }

Now the problem is that without SingleScrollChidView this works fine But after using SingleScrollChidView it does not shows anything and gives error RenderBox was not laid out.What is wrong here ? How can i use Expandable list view inside Singlechildscroll view in flutter.

Upvotes: 4

Views: 6958

Answers (4)

Vicky Salunkhe
Vicky Salunkhe

Reputation: 10975

Edited answer

Try this, you should get the desired output you are looking for.

You can find the output here.

Column(
  children: <Widget>[
     Text(),
     ListView(
       shrinkWrap: true,  
       physics: ScrollPhysics(),
       children:[]),
     Text()
   ]
 )

adding below shown code in ListView will allow smooth scrolling of widget

 shrinkWrap: true,  
 physics: ScrollPhysics(),

Upvotes: -1

Prashant
Prashant

Reputation: 61

I was able to achieve Expanded ListView within ScrollView with text by - Use of Wrap inside SingleChildScrollView, provided you make all ListView using shrinkWrap: true

SingleChildScrollView(
      child: Wrap(
        direction: Axis.horizontal,
        children: <Widget>[
          _textBody, // text body, with 1000+ words
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              children: <Widget>[
                ListViewOne(_genericListDataOne()),
              ],
            ),
          ),
          Column(
            children: <Widget>[
              ListViewTwo(_genericListDataTwo())
            ],
          )
        ],
  ),
    ),

part of the Code for ListViewOne 

 ListViewOne(
  shrinkWrap: true,
  padding: new EdgeInsets.symmetric(vertical: 8.0),
  children: // build list here,
);

Upvotes: 3

Devarsh Ranpara
Devarsh Ranpara

Reputation: 1112

Use SizedBox.expand for this problem,

SizedBox.expand(
child : ListView.builder(  
            itemCount: datas.length,  
            shrinkWrap: true,  
            itemBuilder: (context, i) {  
              return new ExpansionTile(  
                title: new Text(datas[i].title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold,                                 fontStyle: FontStyle.italic),),  
                children: <Widget>[  
                  new Column(  
                    children: _buildExpandableContent(datas[i]),  
                  ),  
                ],  
              );  
            },  
          ),  
);

Upvotes: 0

Doc
Doc

Reputation: 11651

Give your ListView a fixed height using SizedBox or similar

SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Text("Header"),// tested with 20 of these for scrolling
            SizedBox(
              height: MediaQuery.of(context).size.height / 2,
              child: new ListView.builder(
                itemCount: 20,
                shrinkWrap: true,
                itemBuilder: (context, i) {
                  return new ExpansionTile(/* whatever */ );
                },
              ),
            ),
            Text("Footer"),// tested with 20 of these for scrolling
          ],
        ),
      )

Upvotes: 1

Related Questions