flutter - 页面加载后如何启动 AnimatedContainer 动画？

Question

我正在尝试创建一个自定义进度条，每次页面加载时我都希望它从 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 的动画，或者我必须使用其他东西来达到预期的效果。

我还是新手，因此不胜感激。

标签： flutterdartflutter-animation

Answer 1

要在 Flutter 中加载屏幕期间使用处理动画AnimatedContainer，可以使用Future.delayedin initState（我延迟 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),
            ),
          ),
        ),
      ),
    );
  }
}