flutter - Flutter draw Opens without transition with list view builder

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,
  });

标签： flutter