页面加载后如何启动 AnimatedContainer 动画？答案

【问题标题】：How to start AnimatedContainer animation after page loads?页面加载后如何启动 AnimatedContainer 动画？
【发布时间】：2019-12-23 06:40:43
【问题描述】：

我正在尝试创建一个自定义进度条，每次页面加载时我都希望它从 0 动画到指定的值。

这是有状态的小部件：

import 'package:flutter/material.dart';
import 'package:new_platform/constants.dart';

class ProgressBarWidget extends StatefulWidget {
  final max;
  final val;

  ProgressBarWidget(this.max, this.val);

  @override
  _ProgressBarWidgetState createState() => _ProgressBarWidgetState();
}

class _ProgressBarWidgetState extends State<ProgressBarWidget> {
    var height;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    height = widget.val;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
      height = widget.val;

      Widget stack = Container(
      margin: EdgeInsets.all(90.0),
      child: Stack(
        alignment: Alignment.centerLeft,
        children: <Widget>[
          Container(
            //background
            decoration: BoxDecoration(
                color: Color(0xFFE8F0F0),
                borderRadius: BorderRadius.circular(30.0)),
            height: 5,
            width: 100,
          ),
          AnimatedContainer(
              foregroundDecoration:  BoxDecoration(
                  borderRadius: BorderRadius.circular(30.0),
                  gradient: COOL_PURPLE_BLUE_GRADIENT,
                  boxShadow: [
                      BoxShadow(
                          color: THEME_BLUE,
                          spreadRadius: -1,
                          offset: Offset(0, 0),
                          blurRadius: 5)
                  ]),
            duration: Duration(milliseconds:800 ),
            //foregroundS
            curve: Curves.decelerate,
            height: 7,
            width: height,
          )
        ],
      ),
    );
    return stack;
  }
}

是否可以延迟AnimatedContainer的动画或者我必须使用其他东西才能达到预期的效果。

我还是新手，所以感谢任何帮助。

【问题讨论】：

不，你不能“延迟”AnimatedController的动画
@pskink 我明白了，你建议我改用什么？
AnimatedBuilder?编辑（对不起，我的意思是AnimatedContainer在上一条评论中）
@pskink 我明白了，我试试看，谢谢！
当然，祝你好运

标签： flutter dart flutter-animation

【解决方案1】：

要在 Flutter 中加载屏幕期间使用 AnimatedContainer 处理动画，您可以在 initState 中使用 Future.delayed（我延迟 3 秒才能理解，但您可以延迟 0 秒）：

飞镖垫： https://dartpad.dev/d56165e07a3e58215206790248611b38?null_safety=true

代码：

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatefulWidget {
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  Color color = Colors.green;
  String text = 'Wait 3s in green';

  @override
  void initState() {
    super.initState();
    // Rebuild the screen after 3s which will process the animation from green to blue
    Future.delayed(Duration(seconds: 3)).then((value) => setState(() {
          color = Colors.blue;
          text = 'Become blue !';
        }));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AnimatedContainer(
          duration: Duration(seconds: 2),
          color: color,
          child: Center(
            child: Text(
              '${text}',
              style: TextStyle(fontSize: 40.0),
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：