How to build a card screen with expansion panel list in Flutter?

Question

Model

I am building a screen in flutter that primarily contains a list of payment cards and their information which can be edited.

When we arrive on the page, initially we see a list of cards with card name or some attribute.

However when we click on dropdown button, the card expands and shows the card information and an edit button appears in the header. After clicking on the edit button, I want the card information widget to change into editable fields with which we can update the clicked card's information using save button present in the child.

I decided to use expansion panel list to build this functionality. however, my question is how can I change the child(expanded panel's body widget from a text box into editable containers).

Solution

Here is an example with 3 different ways to change from a read only text to an editable one:

bool editMode = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ListView(
      children: <Widget>[
        RaisedButton(
          child: Text(editMode ? "Save" : "Edit"),
          onPressed: () {
            setState(() {
              editMode = !editMode;
            });
          },
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: TextFormField(
            enabled: editMode,
            controller: TextEditingController(text: "Abc"),
          ),
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: TextField(
            enabled: editMode,
            controller: TextEditingController(text: "Abc"),
          ),
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: editMode
              ? TextField(
                  controller: TextEditingController(text: "Abc"),
                )
              : Padding(
                  padding: EdgeInsets.symmetric(vertical: 12.0),
                  child: Text(
                    "Abc",
                    style: Theme.of(context).textTheme.subhead,
                  ),
                ),
        ),
      ],
    ),
  );
}

Comments

[nmanikiran]

we have ExpansionPanelList in flutter api.flutter.dev/flutter/material/ExpansionPanelList-class.ht‌​ml

[pavan]

Thanks for the idea. Approving it!