Flutter draw Opens without transition with list view builder - flutter

Question

I want my drawer contain list with expandable items, a list view inside list view.
it is working but the transition stopped, its just appear suddenly.
There aren't a lot items, 30 expandable rows and in conclude 100 so i think it shouldn't effect but it is.
I don't want custom drawer because the regular transition is good enough for me.
When i change the item Count to 2 its working fine so the amount is the problem.
class AppDrawer extends StatelessWidget {
const AppDrawer({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
List<LeagueCountry> _countries =
Provider.of<LeaguesProvider>(context).getByCountries();
return Drawer(
child: Container(
// child: DrawerList(),
child: ListView.builder(
itemCount: _countries.length,
itemBuilder: (BuildContext context, int index) {
return ExpandableListView(
title: "Title $index",
country: _countries[index],
);
},
),
),
);
}
}
class ExpandableListView extends StatefulWidget {
final String title;
final LeagueCountry country;
const ExpandableListView({
Key key,
this.title,
this.country,
}) : super(key: key);
#override
_ExpandableListViewState createState() => new _ExpandableListViewState();
}
class _ExpandableListViewState extends State<ExpandableListView> {
bool expandFlag = false;
double rowHeight = 50.0;
#override
Widget build(BuildContext context) {
return new Container(
margin: new EdgeInsets.symmetric(vertical: 1.0),
child: new Column(
children: <Widget>[
new Container(
color: Colors.blue,
padding: new EdgeInsets.symmetric(horizontal: 5.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new IconButton(
icon: new Container(
alignment: Alignment.center,
height: 50.0,
width: 50.0,
decoration: new BoxDecoration(
color: Colors.orange,
shape: BoxShape.circle,
),
child: Center(
child: Icon(
expandFlag
? Icons.keyboard_arrow_up
: Icons.keyboard_arrow_down,
color: Colors.white,
size: 30.0,
),
),
),
onPressed: () {
setState(() {
expandFlag = !expandFlag;
});
}),
new Text(
widget.country.name,
style: new TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
)
],
),
),
new ExpandableContainer(
expandedHeight: rowHeight * widget.country.leagues.length,
expanded: expandFlag,
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Container(
height: rowHeight,
decoration: new BoxDecoration(
border: new Border.all(width: 1.0, color: Colors.grey),
color: Colors.black),
child: new ListTile(
title: new Text(
"${widget.country.leagues[index].name}",
style: new TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
leading: new Icon(
Icons.local_pizza,
color: Colors.white,
),
),
);
},
itemCount: widget.country.leagues.length,
))
],
),
);
}
}
Expandable container :
class ExpandableContainer extends StatelessWidget {
final bool expanded;
final double collapsedHeight;
final double expandedHeight;
final Widget child;
ExpandableContainer({
#required this.child,
this.collapsedHeight = 0.0,
this.expandedHeight = 300.0,
this.expanded = true,
});
#override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
return new AnimatedContainer(
duration: new Duration(milliseconds: 500),
curve: Curves.easeInOut,
width: screenWidth,
height: expanded ? expandedHeight : collapsedHeight,
child: new Container(
child: child,
decoration: new BoxDecoration(
border: new Border.all(width: 1.0, color: Colors.blue)),
),
);
}
}
league country model:
class LeagueCountry {
String name;
List<League> leagues;
LeagueCountry({
this.name,
this.leagues,
});
}
League model:
class League {
String id;
int externalId;
String name;
String countryName;
int priority;
bool showInHomepage;
League({
this.id,
this.externalId,
this.name,
this.countryName,
this.priority,
this.showInHomepage,
});