I want to make expandable listview like below in attached image. How to implement this kind of functionality in Flutter?
Ravi Agrawal
How can I achieve this? I tried customizing the ExpansionTile but couldn't get a similar effect on expanding and collapsing. Mainly the size of the prefix icon is larger so the expandable text is not close to the date. Also, the suffix icon for expand/collapse doesn't completely cover the background color.
I've also attached an image of what I've tried. I've used https://pub.dev/packages/expandable#-readme-tab- to similar effect with no luck.
I'm really stuck at this place and need any help. Your help will be greatly appreciated. thanks.
Zhao chi
Just implemented, try the following:
ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ExpandableNotifier(
child: Card(
elevation: 4,
child: Expandable(
collapsed: Container(
width: MediaQuery.of(context).size.width,
height: 105,
child: ExpandableButton(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.yellow,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
),
),
),
Container(
color: Colors.yellow,
width: 30,
height: 105,
child: Icon(
Icons.keyboard_arrow_right,
color: Colors.white,
),
),
],
),
),
),
expanded: Container(
height: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.purple,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
),
SizedBox(
height: 5,
),
Container(
width: 80,
height: 20,
child: RaisedButton(
padding: EdgeInsets.all(0),
color: Colors.purple,
child: Text('show'),
onPressed: () {},
),
),
],
),
),
),
ExpandableButton(
child: Container(
color: Colors.purple,
width: 30,
height: 200,
child: Icon(
Icons.keyboard_arrow_down,
color: Colors.white,
),
),
),
],
),
),
),
),
);
},
),