Как анимировать виджет после запуска приложения

Question

Я хочу анимировать высоту моего контейнера после запуска приложения (после того, как дерево виджетов отображается и отображается на экране).Например, высота анимации от 86 до 210.

Что я пробовал:

class MyAppState extends State<HomePage> with TickerProviderStateMixin {

  double appBarHeight = 86.0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance
        .addPostFrameCallback((_) => animate());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          AnimatedContainer(
            curve: Curves.fastOutSlowIn,
            child: Container(
              color: Colors.red,
            ),
            height: appBarHeight,
            duration: Duration(milliseconds: 400),
          ),
          Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: EdgeInsets.only(right: 16.0, bottom: 16.0),
                child: FloatingActionButton(
                  child: Icon(Icons.brush),
                  onPressed: () {
                    animate();
                  },
                ),
              ))
        ],
      ),
    );
  }

  void animate(){
    setState(() {
      if (appBarHeight == 210.0) appBarHeight = 86.0;
      else appBarHeight = 210.0;
    });
  }
}

Но это не работает, потому что виджет анимируется до появления на экране.Я вижу белый экран во время запуска приложения, а затем мой виджет появляется на экране с окончательной высотой.

В Android для этой цели мы можем использовать addOnLayoutChangeListener().

Есть ли аналог addOnLayoutChangeListener() во Флаттере?

Answer 1

Как вы упомянули, похоже, что это проблема для Android, я тестировал на iOS, и анимация запускается в начале.

Вы можете попробовать этот обходной путь:

  _startAnimation(_) async {
      await Future.delayed(Duration(milliseconds: 200));
      animate();
    }

    @override
    void initState() {
      super.initState();
      WidgetsBinding.instance.addPostFrameCallback(_startAnimation);
    }