Flutter - падение производительности (jank) из-за слишком большого количества дочерних элементов Stack

Question

Я должен визуализировать дерево с неизвестным количеством листьев. Но когда количество листьев слишком велико, производительность приложения резко падает. Что я могу сделать, чтобы повысить производительность? Количество листьев может достигать 1000, поэтому стек из 1000 дочерних элементов может снизить производительность, но что я могу с этим поделать? Заранее спасибо!

      class Tree extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Random random = new Random();
    final leaf = Provider.of<Leafs>(context, listen: false);
    final heightTree = (MediaQuery.of(context).size.width - 60) * (772 / 480); //Ratio of the tree
    final heightTreeTrunk = heightTree * (169 / 772); //Ratio of the treetrunk
    const leafSize = 20.0;
    final children = <Widget>[
      Padding(
        padding: EdgeInsets.fromLTRB(30, 15, 30, 0),
        child: Image.asset(
          'assets/images/tree2.png',
          color: Colors.grey.shade600,
        ),
      ),
    ];
    for (var i = 0; i < leaf.tot; i++) {
      double angle = random.nextInt(100) / 100 * 2 * pi;
      double ran = sqrt(random.nextInt(100) / 100);
      children.add(
        Padding(
          padding: EdgeInsets.fromLTRB(5, 0, 5, heightTreeTrunk),
          child: Align(
            alignment: Alignment(
              ran * cos(angle),
              ran * sin(angle),
            ),
            child: RotationTransition(
              turns: AlwaysStoppedAnimation(random.nextInt(360) / 360),
              child: SizedBox(
                height: leafSize,
                width: leafSize,
                child: Image.asset(
                  'assets/images/leaf8.png',
                ),
              ),
            ),
          ),
        ),
      );
    }
    return Container(
      height: heightTree,
      child: Stack(children: children,),
    );
  }
}

Answer 1

Вероятно, вы могли бы попробовать заменить свой RotationTransition виджетом Transform.rotate, поскольку вы используете AlwaysStoppedAnimation.

И вы также можете использовать виджет с позиционированием вместо виджета Alignment + Padding!