应用程序启动后如何为小部件设置动画答案

【问题标题】：How to animate widget after the app is launched应用程序启动后如何为小部件设置动画
【发布时间】：2019-05-09 06:08:32
【问题描述】：

我想在启动应用程序后（在小部件树被渲染并显示在屏幕上之后）为我的容器高度设置动画。例如，将高度从 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()。

Flatter 中有 addOnLayoutChangeListener() 的类似物吗？

【问题讨论】：

我怀疑flutter中是否有这种方法。这是StatefulWidget - flutterbyexample.com/stateful-widget-lifecycle 的生命周期方法。但我没有看到你可以使用其中的哪些
如果你增加动画的持续时间，它会起作用吗？持续时间（毫秒：400）
您的代码没有明显的问题，400 毫秒的持续时间太小，无法注意到，增加您的持续时间它会正常工作。我测试过。
@diegoveloper 它适用于更长的持续时间，但我认为这不是一个解决方案。我应该增加多少持续时间？持续时间=应用程序启动时+动画持续时间？但对于不同的电话来说，这是一个不同的时间。我想在小部件布局后以任何持续时间开始动画。
如果我在我的 iOS 模拟器上运行你的示例，它就可以正常工作，动画会出现在开头

标签： animation widget flutter rendering

【解决方案1】：

正如你提到的，看起来这是 Android 上的问题，我在 iOS 上进行了测试，动画在开始时运行。

你可以试试这个解决方法：

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

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

【讨论】：