How to start AnimatedContainer animation after page loads?

Issue

I’m trying to create a custom progress bar that I want to have animate from 0 to the assigned value every time the page loads.

Here is the stateful widget:

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;
  }
}

Is it possible to delay the animation of the AnimatedContainer or do I have to use something else to achieve the desired effect.

Im still new to flutter so any help is appreciated.

Solution

To process animation using AnimatedContainer during screen is loading in Flutter, you can use a Future.delayed in initState (I delays for 3 seconds to understand but you can delay 0 second for example):

DartPad : https://dartpad.dev/d56165e07a3e58215206790248611b38?null_safety=true

Code:

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),
            ),
          ),
        ),
      ),
    );
  }
}

Answered By – Adrien Arcuri

Answer Checked By – David Marino (FlutterFixes Volunteer)