Ufdjrw

I have a list view which are list of card build dynamically. In one part of the card I put one column and put an arrow down button/icon. On click I want to open more details in an expansion tile. So I create a widget function for it. I notice the function is being called cause I put a print in it but the expansion tile is not being build right below the card.

First part is here I build my dynamic cards.

 itemBuilder: (BuildContext ctxt, int index) 
 return new Container(

 margin: new EdgeInsets.fromLTRB(0, 10, 20, 0),
 decoration: new BoxDecoration(
 //color:Color.fromRGBO(255, 255,255, 1),
 borderRadius: new BorderRadius.only(
 topRight: const Radius.circular(35),
 bottomRight: const Radius.circular(35)
 ),

 ),
 width: double.infinity,
 height: 55,
 child:Card(
 elevation: 5,
 //color: Color.fromRGBO(255, 255, 255, 1),
 clipBehavior: Clip.antiAlias,
 shape: RoundedRectangleBorder(
 borderRadius: new BorderRadius.only(
 topRight: const Radius.circular(35),
 bottomRight: const Radius.circular(35)
 ), 
 ),

 child: Row(
 crossAxisAlignment: CrossAxisAlignment.center,
 children: <Widget>[



 Container(
 width: 90,

 child:
 Row(
 mainAxisAlignment: MainAxisAlignment.center, 
 crossAxisAlignment: CrossAxisAlignment.center, 
 children: [ 
 Column(
 mainAxisAlignment: MainAxisAlignment.center, 
 crossAxisAlignment: CrossAxisAlignment.center, 
 children: [ 
 //new Row( 
 // mainAxisSize: MainAxisSize.max, 

 //children: <Widget>[ 
 new Text( 
 "200", style: TextStyle(color:Colors.blue),
 ), 
 new Text( 
 "mmm", style: TextStyle(color:Colors.black),
 ), 
 // new Icon(Icons.account_circle) 
 //style: Theme.of(context).textTheme.body2 

 ],
 ),
 Column(
 mainAxisAlignment: MainAxisAlignment.center, 
 crossAxisAlignment: CrossAxisAlignment.center, 
 children: [
 GestureDetector( 
 onTap: () 
 print("Calling expansion tile");
 expansionList(context,index);
 ,
 child: Icon(Icons.arrow_drop_down), 
 ) 



 ]
 )
 //style: Theme.of(context).textTheme.body2 

 ],
 ),
 )
 ]
 )
 )
 );
 

Thus on tap function I call this function expansionList(context,index); which I have shown below the details of the function. But the tile is not being open. How to make the tile to open dynamically on tap.

Widget expansionList(BuildContext context, int index) 
 print("In expansion tile");
 return new ExpansionTile(

 title: Text(
 "TEST",
 style: TextStyle(fontSize: 28.0),
 ),
 children: <Widget>[
 Column(
 mainAxisAlignment: MainAxisAlignment.center, 
 crossAxisAlignment: CrossAxisAlignment.center, 
 children: [ 
 //new Row( 
 // mainAxisSize: MainAxisSize.max, 

 //children: <Widget>[ 
 new Text( 
 "200", style: TextStyle(color:Colors.blue),
 ), 
 new Text( 
 "mmm", style: TextStyle(color:Colors.black),
 ), 
 // new Icon(Icons.account_circle) 
 //style: Theme.of(context).textTheme.body2 

 ],
 ),


 ]


 );

What you do now is - on each click you:

• call print method - it prints to console.


• call a function that returns ExpansionTile widget.

But you do nothing with the returned value, it doesn't even has a chance to get into your widget tree, it's simply built and nothing done with it.

ExpansionTile is a widget which consists of:

• 
  

  3 slots each can hold Widget(or tree):

  
  
  
  1. Widget leading - usually you place avatar/icon/checkbox here
  
  
  2. Widget title - main content of a tile
  
  
  3. Widget trailing - the end of tile, best place for dropdown arrow (included in ExpansionTile by default)
  
  



• and a children array - what is shown when expanded;

Code:

 @override
 Widget build(BuildContext context) 
 return Container(
 child: ListView.builder(itemBuilder: (BuildContext ctxt, int index) 
 return new Container(
 margin: new EdgeInsets.fromLTRB(0, 10, 20, 0),
 decoration: new BoxDecoration(
 //color:Color.fromRGBO(255, 255,255, 1),
 borderRadius: new BorderRadius.only(
 topRight: const Radius.circular(35),
 bottomRight: const Radius.circular(35)),
 ),
 width: double.infinity,
 // height: 55,
 child: Card(
 elevation: 5,
 clipBehavior: Clip.antiAlias,
 shape: RoundedRectangleBorder(
 borderRadius: new BorderRadius.only(
 topRight: const Radius.circular(35),
 bottomRight: const Radius.circular(35)),
 ),
 child: expansionList(ctxt, index),
 ),
 );
 ),
 );
 

And place whatever you want on collapsed tile in leading and title, if you want customize the arrow - use custom trailing.

 Widget expansionList(BuildContext context, int index) 
 print("Building expansion tile");
 return new ExpansionTile(
 initiallyExpanded: false,
 leading: Icon(Icons.all_inclusive), 
 title: Column(
 children: <Widget>[
 Row(
 crossAxisAlignment: CrossAxisAlignment.center,
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: <Widget>[
 Text('Content'),
 RaisedButton(
 child: Text('Button'),
 onPressed: () ,
 ),
 Text('Row 1'),
 ],
 ),
 Row(
 crossAxisAlignment: CrossAxisAlignment.center,
 children: <Widget>[
 Text('Content row 2'),
 ],
 ),
 Row(
 mainAxisAlignment: MainAxisAlignment.end,
 children: <Widget>[
 Text('Content row 3')
 ],
 )
 ],
 ),
 children: <Widget>[
 Image.network(
 "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png",
 height: 55,
 ),
 ],
 );
 

PS get familiar with code formatting hot-key combo, and always put trailing commas - the code will auto-format much nicer