Using Expansion Tile with ListView in Flutter
10,656
Updated Code with no Error -
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(""),
),
body: Container(
padding: EdgeInsets.all(15.0),
child: Column(
children: <Widget>[Flexible(child: CardList()), Flexible(child: MyList())],
),
),
);
}
}
Widget CardList() {
return SingleChildScrollView(
child: Card(
child: ExpansionTile(
title: Text(
"Periodo",
style: new TextStyle(),
textAlign: TextAlign.center,
),
children: <Widget>[
ListTile(
title: Text(
"Periodo 1",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 2",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 3",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 4",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 5",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 6",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 7",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 8",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 9",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 10",
textAlign: TextAlign.center,
),
),
ListTile(
title: Text(
"Periodo 11",
textAlign: TextAlign.center,
),
),
],
),
),
);
}
Widget MyList() {
return new ListView(
shrinkWrap: true,
children: <Widget>[
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
Divider(),
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
Divider(),
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
Divider(),
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
Divider(),
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
Divider(),
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
Divider(),
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
Divider(),
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
Divider(),
ListTile(
title: Text(
"Teste",
textAlign: TextAlign.center,
),
),
],
);
}
Related videos on Youtube
Author by
pksasso
Updated on June 04, 2022Comments
-
pksasso almost 2 years
I'm trying to build the app from this image, but when i put the ListView in the same page with this Expansion Tile the screen become empty.
I added
shrinkwrap: true
and worked, but now I have a new problem, bottom overflowed when I open the ExpansionTile or when I have many option on ListViewFollow is the tried code: I'll make a ListBuilder after
class HomeState extends State<Teste>{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text (""), ), body: Container( padding: EdgeInsets.all(15.0), child: Column( children: <Widget>[ CardList(), MyList() ], ), ), ); } } Widget CardList(){ return new Flexible( child: Card( child: ExpansionTile( title: Text("Periodo", style: new TextStyle( ),textAlign: TextAlign.center, ), children: <Widget>[ ListTile( title: Text("Periodo 1",textAlign: TextAlign.center,), ), ListTile( title: Text("Periodo 2",textAlign: TextAlign.center,), ), ListTile( title: Text("Periodo 3",textAlign: TextAlign.center,), ), ListTile( title: Text("Periodo 4",textAlign: TextAlign.center,), ), ListTile( title: Text("Periodo 5",textAlign: TextAlign.center,), ),ListTile( title: Text("Periodo 6",textAlign: TextAlign.center,), ),ListTile( title: Text("Periodo 7",textAlign: TextAlign.center,), ),ListTile( title: Text("Periodo 8",textAlign: TextAlign.center,), ), ], ), ) ); } Widget MyList(){ return new ListView( scrollDirection: Axis.vertical, shrinkWrap: true, children: <Widget>[ ListTile(title: Text("Teste",textAlign: TextAlign.center,),), Divider(), ListTile(title: Text("Teste",textAlign: TextAlign.center,),), Divider(), ListTile(title: Text("Teste",textAlign: TextAlign.center,),), Divider(), ListTile(title: Text("Teste",textAlign: TextAlign.center,),), Divider(), ListTile(title: Text("Teste",textAlign: TextAlign.center,),), Divider(), ListTile(title: Text("Teste",textAlign: TextAlign.center,),), Divider(), ListTile(title: Text("Teste",textAlign: TextAlign.center,),), Divider(), ListTile(title: Text("Teste",textAlign: TextAlign.center,),), Divider(), ListTile(title: Text("Teste",textAlign: TextAlign.center,),), ], ); }