6

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.

5
  • no, you cannot "delay" the animation of AnimatedController
    – pskink
    Aug 17, 2019 at 4:01
  • @pskink I see, what would you suggest I use instead?
    – Henry La
    Aug 17, 2019 at 4:05
  • an AnimatedBuilder? edit (sorry i meant AnimatedContainer in the prev comment)
    – pskink
    Aug 17, 2019 at 4:07
  • @pskink I see, i'll give it a try, thanks!
    – Henry La
    Aug 17, 2019 at 4:14
  • sure, good luck
    – pskink
    Aug 17, 2019 at 4:16

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.