How to Expand a card in a list view to show more data, or even another list view

Question

Does anyone here have any idea on how I can, onTap(), expand the contents of a list view item (a card in this case) - to show more options?? Is there a pub out there that you know of that can assist with this?

I have had a look, but I don't know what to search for? I'm sure you all can imagine the scenario: a user clicks on a list view item, and it opens or reveals more options - perhaps a stack or another list view (horizontal).

Many thanks for any information you can provide.

Answer 1

You can use ExpansionPanel as the children of the ExpansionPanelList or you can use ExpansionTile as the children of ListView.

Answer 2

You can either go with the native material impelementation as mentioned in the comments, or just build you own.

Here is a full working example that you can modify to your needs.

import 'package:flutter/material.dart';


void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  List<ListItem> listItems = List.generate(4, (int index) => ListItem(
    4,
    false
  ));

  _expandItem(ListItem listItem){
    setState(() {
      listItems.forEach((ListItem item) {
        if (item == listItem){
          item.expanded = !item.expanded;
        } else {
          item.expanded = false;
        }

      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: ListView(
            children: listItems.map((ListItem listItem) {
              return Card(
                child: Container(
                  child: Column(
                    children: <Widget>[
                      Text('Hello ${listItem.id}'),
                      RaisedButton(
                        child: Text('Expand'),
                        onPressed: () {
                          _expandItem(listItem);
                        },
                      ),

                      listItem.expanded ? Column(
                        children: List.generate(4, (int index) => Text('Hello $index')),
                      ) : Container(),
                    ],
                  ),
                ),
              );
            }).toList()
            ),
          ),
        ),
      );
  }
}


class ListItem {

  final int id;
  bool expanded;

  ListItem(this.id, this.expanded);
}