Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expansion Panel List in Flutter

I am new to flutter and I am stuck on a problem. I am trying to make a expansion panel list. I am able to make the list but not able to make the expansion panels expand or collapse.I am attaching the code. Please have a look at it and let me know the problem.

ExpansionPanelList criteria;
criteria = new ExpansionPanelList(
  children: <ExpansionPanel>[
    new ExpansionPanel(
      headerBuilder: schoolheaderBuilder,
      body: new Text("school"),
      isExpanded: false,
    ),
    new ExpansionPanel(
      headerBuilder: hospitalheaderBuilder,
      body: new Text("hospital"),
    ),
    new ExpansionPanel(
        headerBuilder: vaheaderBuilder,
        body: new Text("va facility"),
        isExpanded: false),
    new ExpansionPanel(
        headerBuilder: restheaderBuilder,
        body: new Text("Restaurants"),
        isExpanded: false),
    new ExpansionPanel(
        headerBuilder: crimeheaderBuilder,
        body: new Text("Crime"),
        isExpanded: false),
    new ExpansionPanel(
        headerBuilder: commuteheaderBuilder,
        body: new Text("Commute"),
        isExpanded: false),
    new ExpansionPanel(
        headerBuilder: incomeBuilder,
        body: new Text("Household Income"),
        isExpanded: false),
    new ExpansionPanel(
        headerBuilder: househeaderBuilder,
        body: new Text("House Value"),
        isExpanded: false)
  ],
  expansionCallback: (int index, bool isExpanded)
  {
    isExpanded = !criteria.children[index].isExpanded;
  },
);
like image 808
Shreya Avatar asked Aug 08 '17 04:08

Shreya


People also ask

What is expansion panel?

# Expansion panels. The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the multiple property, the expansion-panel can remain open until explicitly closed.

What is expandable in flutter?

Expanded widget in flutter comes in handy when we want a child widget or children widgets to take all the available space along the main-axis (for Row the main axis is horizontal & vertical for Column). Expanded widget can be taken as the child of Row, Column, and Flex.


1 Answers

This is the code I used:

class Criterias extends StatefulWidget {
  CriteriaState createState() => new CriteriaState();
}

class NewItem {
  bool isExpanded;
  final String header;
  final Widget body;
  final Icon iconpic;
  NewItem(this.isExpanded, this.header, this.body, this.iconpic);
}

double discretevalue = 2.0;
double hospitaldiscretevalue = 25.0;

class CriteriaState extends State<Criterias> {
  List<NewItem> items = <NewItem>[
    new NewItem(
        false,
        'Schools',
        new Padding(
            padding: new EdgeInsets.all(20.0),
            child: new Column(
                children: <Widget>[
                    //put the children here
                ])
              ),new Icon(Icons.add)),
              //give all your items here
  ];

  ListView List_Criteria;
  Widget build(BuildContext context) {
    List_Criteria = new ListView(
      children: [
        new Padding(
          padding: new EdgeInsets.all(10.0),
          child: new ExpansionPanelList(
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                items[index].isExpanded = !items[index].isExpanded;
              });
            },
            children: items.map((NewItem item) {
              return new ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return new ListTile(
                      leading: item.iconpic,
                      title: new Text(
                        item.header,
                        textAlign: TextAlign.left,
                        style: new TextStyle(
                          fontSize: 20.0,
                          fontWeight: FontWeight.w400,
                        ),
                      ));
                },
                isExpanded: item.isExpanded,
                body: item.body,
              );
            }).toList(),
          ),
        )
      ],
    );

    Scaffold scaffold = new Scaffold(
      appBar: new AppBar(
        title: new Text("Criteria Selection"),
      ),
      body: List_Criteria,
      persistentFooterButtons: <Widget>[
        new ButtonBar(children: <Widget>[
          new FlatButton(
            color: Colors.blue,
            onPressed: null,
            child: new Text(
              'Apply',
              textAlign: TextAlign.left,
              style: new TextStyle(fontWeight: FontWeight.bold),
            ),
          )
        ])
      ],
    );
    return scaffold;
  }
}
like image 140
Shreya Avatar answered Oct 18 '22 22:10

Shreya