Flutter Progress Indicator Size

Question

I was wondering if there was a way to change the width/length/height of both the linear and circular progress bar. I'm trying to make a XP bar using it, but I'm not sure if that's possible. Also, I am aware the values are only through 0.0 and 1.0, but I also think it's possible(not sure) that I would be able to make a formula to where it will still work.

could you put the code you have? You'll have to change the constraints of the parents of the Linear/Circular progress indicator, you can change the height , width , and the value is from 0.0 to 1.0. — diegoveloper, Sep 26 '18 at 01:29

F-1 · Answer 1 · 2019-09-09T10:05:14.020

38

Progress indicator will fill its parent layout widget e.g

SizedBox(
    height: 300.0,
    width: 300.0,
    child: 
        CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation(Colors.blue),
        strokeWidth: 5.0)
    )

edited Sep 09 '19 at 10:05

answered Sep 26 '18 at 07:52

F-1

2,887
20
28

4

SizedBox does not constrain the shape of the CircularProgressIndicator. It seems like a bug in Flutter. Wrapping it all in `Center(child: )`, however, does. – user48956 Feb 04 '20 at 01:27
This is the code I have used in production, if it's not working now it would appear then that something has changed in the latest version of Flutter. Hopefully it is just a bug, what build channel are you using? (stable, beta, dev, master?) – F-1 Feb 05 '20 at 06:44
1

See my answer here: https://stackoverflow.com/questions/51901379/how-to-set-size-to-circularprogressindicator/60049283#60049283 Whether the SizeBox has any effect seems to depend on what it is contained in (works as advertized if contained in a Center, for example, but not within a Stack). I've submitted a bug: https://github.com/flutter/flutter/issues/50075 – user48956 Feb 05 '20 at 19:07
A SizedBox is constrained (size enforced) by its parent and won't loosen those constraints (Center will loosen constraints). If constraints are "tight" (no size variation allowed) at screen width (e.g. inside a vertical scroll ListView), SizedBox width argument will be ignored. Wrapping SizedBox in Center works as Center fills the largest space possible and then loosens constraints for its child, allowing child to take any size it wants. https://flutter.dev/docs/development/ui/layout/constraints section "Tight vs. loose constraints" explains this a bit – Baker May 26 '20 at 18:47

ijann · Answer 2 · 2019-01-25T15:39:20.280

9

With this code you decide that it is an array of Widget, if you put that is an array, it's because of the response you can give, You can have more widget to add,
That is centered
and what is a CircularProgressIndicator.

In this way, the Circular Progress Indicator will not take the width and height of the father that contains it

regards

<Widget>[Center(child: CircularProgressIndicator())]

edited Jan 25 '19 at 15:39

answered Jan 22 '19 at 19:35

ijann

101
1
3

score 1 · Answer 3 · edited Dec 25 '18 at 02:10

How can I combine a class that creates a loading indicator with my button, so that when I press it, the indicator turns on and flips to the next page?

Here the code:

class Loader extends StatefulWidget {
      @override
      State createState() => LoaderState();
    }

    class LoaderState extends State<Loader> with SingleTickerProviderStateMixin {
      AnimationController controller;
      Animation<double> animation;

      @override
      void initState() {
        super.initState();
        controller = AnimationController(
            duration: Duration(milliseconds: 1200), vsync: this);
        animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut);
        animation.addListener(() {
          this.setState(() {});
        });
        animation.addStatusListener((AnimationStatus status) {});
        controller.repeat();
      }

      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 3.0,
              width: animation.value * 100.0,
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 5.0),
            ),
            Container(
              color: Colors.blue[300],
              height: 3.0,
              width: animation.value * 75.0,
            ),
            Padding(
              padding: EdgeInsets.only(bottom: 5.0),
            ),
            Container(
              color: Colors.blue,
              height: 3.0,
              width: animation.value * 50.0,
            )
          ],
        );
      }
    }


    Expanded(
                        child: Padding(
                          padding:
                              EdgeInsets.only(left: 20.0, right: 5.0, top:20.0),
                          child: GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => FirstScreen()));
                            },
                            child: Container(
                                alignment: Alignment.center,
                                height: 45.0,
                                decoration: BoxDecoration(
                                    color: Color(0xFF1976D2),
                                    borderRadius: BorderRadius.circular(9.0)),
                                child: Text('Login',
                                    style: TextStyle(
                                        fontSize: 20.0, color: Colors.white))),
                          ),
                        ),
                      ),

How can I combine a class that creates a loading indicator with my button, so that when I press it, the indicator turns on and flips to the next page ? — Max, Dec 24 '18 at 20:58
By clicking on the Login button, the loading indicator should appear for 3 seconds, and then go to the next page. — Max, Dec 24 '18 at 21:42

Flutter Progress Indicator Size

3 Answers3