How to start AnimatedContainer animation after page loads?


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

  _ProgressBarWidgetState createState() => _ProgressBarWidgetState();

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

  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>[
            decoration: BoxDecoration(
                color: Color(0xFFE8F0F0),
                borderRadius: BorderRadius.circular(30.0)),
            height: 5,
            width: 100,
              foregroundDecoration:  BoxDecoration(
                  borderRadius: BorderRadius.circular(30.0),
                  gradient: COOL_PURPLE_BLUE_GRADIENT,
                  boxShadow: [
                          color: THEME_BLUE,
                          spreadRadius: -1,
                          offset: Offset(0, 0),
                          blurRadius: 5)
            duration: Duration(milliseconds:800 ),
            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.


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):

enter image description here

DartPad :


import 'package:flutter/material.dart';

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

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

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

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

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AnimatedContainer(
          duration: Duration(seconds: 2),
          color: color,
          child: Center(
            child: Text(
              style: TextStyle(fontSize: 40.0),

Answered By – Adrien Arcuri

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.