How to add subitems to ExpansionPanelList - ListView.Builder? - flutter

Question

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatefulWidget(),
),
);
}
}
class Item {
Item({
this.expandedValue,
this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
List<Item> _subItems;
List<Item> get getSubItems => _subItems;
set subItems(List<Item> subItems) {
_subItems = subItems;
}
}
List<Item> generateItems(int numberOfItems) {
return List.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Panel $index',
expandedValue: 'This is item number $index',
);
});
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
List<Item> _data = generateItems(8);
#override
void initState() {
_data.forEach((element) {
element.subItems = generateItems(3);
});
super.initState();
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: Container(
child: ListView.builder(
itemCount: item._subItems.length,
itemBuilder: (context, position) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
position.toString(),
style: TextStyle(fontSize: 22.0),
),
),
);
},
),
),
isExpanded: item.isExpanded,
);
}).toList(),
);
}
}

Answer 1

I think, ExpansionTile is what you need
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatefulWidget(),
),
);
}
}
class Item {
Item({
this.headerValue,
this.expandedValue,
});
String headerValue;
String expandedValue;
List<Item> subItems;
}
List<Item> generateItems(int numberOfItems) {
return List.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Panel $index',
expandedValue: 'This is item number $index',
);
});
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
List<Item> _data = generateItems(8);
#override
void initState() {
_data.forEach((element) {
element.subItems = generateItems(3);
});
super.initState();
}
#override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: _data.length,
separatorBuilder: (context, index){
return const Divider(height: 1.0);
},
itemBuilder: (context, index){
final item = _data[index];
return ExpansionTile(
title: Text(item.headerValue),
subtitle: Text(item.expandedValue),
children: item.subItems.map((subItem){
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
subItem.expandedValue,
style: TextStyle(fontSize: 22.0),
),
),
);
}).toList(),
);
},
);
}
}