Flutter how to in a expanded list view - mysql

Question

Hello good day everyone i want to make my listview into a expanded listview i pull my data using mysql
i want to display first the transaction id and the vesselname then in the side it has it mut have a arrow that when you click it it will show other information details.
Widget build(BuildContext context) {
return Scaffold(
body: RefreshIndicator(
onRefresh: getData,
key: _refresh,
child: loading
? Center(child: CircularProgressIndicator())
: ListView.builder(
itemCount: list.length,
itemBuilder: (context, i) {
final x = list[i];
debugPrint(x.toString());
return Container(
padding: EdgeInsets.all(20.0),
child: Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
the data will be shown first is transaction id and vessel name a arrow icon on the side when it is click it will show the other information
Text(
'Transaction ID:\t' + x.transaction_id,
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),
Text('Vessel Name:\t' + x.vesselname,
style: TextStyle(fontSize: 20.0)),
//this will be the the information displayed after the side arrow will be click
Text('Type of Port :\t' + x.typeofport.capitalize(),
style: TextStyle(fontSize: 20.0)),
Text('Vessel Number:\t' + x.voyageno,
style: TextStyle(fontSize: 20.0)),
Text('Ship Call #:\t' + x.scn,
style: TextStyle(fontSize: 20.0)),
Text('OR #:\t' + x.ornum,
style: TextStyle(fontSize: 20.0)),
Text(
'Amount:\t ' +
money.format(int.parse(x.payment)),
style: TextStyle(fontSize: 20.0)),
Text('Status:\t' + x.status.toUpperCase(),
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
color: x.status == 'pending'
? Colors.red
: Colors.green)),
Divider()
],
),
),
],
),
);
},
),
));
}
}

Answer 1

first when you fetch data in your DTO you can put bool variable inside or you can remap your DTO and put variable bool
so your variable inside somehow like this:
Map<DTO, bool>
or
DTO{
........, bool collapsed;
}
then in your code when you create your builder
final x = list[i]; >> changed to entries if you used Map [final x = mapData[i].entries.toList()]
return Container(
padding: EdgeInsets.all(20.0),
child: GestureDetector(
onTap: (){
setState({
// if you using Map
x[i] = !x.value;
// if you using DTO
x.collapsed = !x.collapsed;
});
},
child: Column(
children:[
// Your Header
Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
the data will be shown first is transaction id and vessel name a arrow icon on the side when it is click it will show the other information
Text(
'Transaction ID:\t' + x.transaction_id,
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),
Text('Vessel Name:\t' + x.vesselname,
style: TextStyle(fontSize: 20.0)),
]
// Your Detail
// [if you used DTO]
if(!x.collapsed) Container(child:.......)
// [if you used Map]
if(!x.value) Container(child:......)
)
)
this is only the logic of changing the list inside to become Collapsible listView

Answer 2

explore ExpansionTile in flutter, I think it fits your requirement.