I want to create a list view that has lists under each heading where the heading is expandable or collaspable. The expansion tile does not push other containers in the list down or expand the size of the container. It overflows
import 'package:flutter/material.dart';
import 'package:configurable_expansion_tile_null_safety/configurable_expansion_tile.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: TestAccordianListView(title: 'Accordian ListView'),
);
}
}
const MediumBoldStyle =
TextStyle(fontSize: 15.0, color: Colors.black, fontWeight: FontWeight.bold);
class TestAccordianListView extends StatefulWidget {
TestAccordianListView({this.title});
String ?title;
@override
State<TestAccordianListView> createState() => _TestAccordianListViewState(title);
}
class DataStoreClass{
String header;
List<int> items;
DataStoreClass(this.header,this.items);
}
class _TestAccordianListViewState extends State<TestAccordianListView> {
_TestAccordianListViewState(this.title);
String? title;
List<DataStoreClass> lstData=[
DataStoreClass("Header1",[1,2,3,4]),
DataStoreClass("Header2",[5,6,7,8]),
DataStoreClass("Header3",[9,10,11,12]),
];
@override
Widget build(BuildContext context) {
return
Scaffold(appBar: AppBar(title:Text(title??"")),body:
ListView.builder(itemCount: lstData.length,
itemBuilder: (context,index){
return
Container(
//height:50,
width:300,
//child:Card(
// semanticContainer: true,
//elevation:5,
//shape: RoundedRectangleBorder(
//borderRadius: BorderRadius.circular(5.0),
//),
//child:
//Padding(
padding: EdgeInsets.all(5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ConfigurableExpansionTile(
borderColorStart: Colors.blue,
borderColorEnd: Colors.blue,
animatedWidgetFollowingHeader: const Icon(
Icons.expand_more,
color: Color(0xFF707070),
),
headerExpanded: Text(lstData[index].header),
header:Container(
color: Colors.transparent,
child: Center(child: Text(lstData[index].header))
),
headerBackgroundColorStart: Colors.grey,
expandedBackgroundColor: Colors.grey,
headerBackgroundColorEnd: Colors.white,
children:[
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 600.0) ,
child:ListView.builder(
itemCount: lstData[index].items.length,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index2)
{
return
Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(lstData[index].items[index2].toString(), style: MediumBoldStyle),
],));
})
,)
]),
])
//)
//)
);
},
)
)
;
}
}
I used a constrained box and a ConfigurableExpansionTile to create a box for my listview.builder to live