I\'m new to Flutter so i am trying to get into it. But I\'m hanging on creating an ExpansionPanelList with ExpansionPanels in it. And Like the title says all created in goog
It sounds like you need to put your ExpansionPanelList
into a ListView
or Column
or some other container that won't force it to be a particular size.
Here is an example of expansion panel usage.
import 'package:flutter/material.dart';
class ShoppingBasket extends StatefulWidget {
@override
ShoppingBasketState createState() => new ShoppingBasketState();
}
class MyItem {
MyItem({ this.isExpanded: false, this.header, this.body });
bool isExpanded;
final String header;
final String body;
}
class ShoppingBasketState extends State<ShoppingBasket> {
List<MyItem> _items = <MyItem>[
new MyItem(header: 'header', body: 'body')
];
@override
Widget build(BuildContext context) {
return new ListView(
children: [
new ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_items[index].isExpanded = !_items[index].isExpanded;
});
},
children: _items.map((MyItem item) {
return new ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return new Text(item.header);
},
isExpanded: item.isExpanded,
body: new Container(
child: new Text("body"),
),
);
}).toList(),
),
],
);
}
}
void main() {
runApp(new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('ExpansionPanel Example'),
),
body: new ShoppingBasket(),
),
));
}
The Flutter Gallery has a more detailed expansion panels example.
There is another way to implement same user experience that is using ExpansionTile
inside a ListView
ListView(
shrinkWrap: true,
children: <Widget>[
ExpansionTile(
leading: Icon(Icons.event),
title: Text('Test1'),
children: <Widget>[
ListTile(title: Text('Title of the item')),
ListTile(
title: Text('Title of the item2'),
)
],
),
ExpansionTile(
title: Text('Test2'),
children: <Widget>[
ListTile(title: Text('Title of the item')),
ListTile(
title: Text('Title of the item2'),
)
],
)
],
)