I want to do the expandable list view as below in attached image. How can I achieve this type of functionality in flutter?

Question

How can I achieve this?. I have tried customizing ExpansionTile but not able to get similar effects on expansion and collapse. Mainly the prefix icon is bigger in size and so the expandable text is not close to the date. Also, the suffix icon for expanding/collapsing not fully covered with the background color.

I am also attaching an image that I have tried. I have used https://pub.dev/packages/expandable#-readme-tab- to achieve a similar effect but no luck.

I am really stuck at this place and want any kind of help. Your help will be appreciated. Thanks.

Answer 1

Just implemented, try this:

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,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        },
      ),