Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set size to CircularProgressIndicator?

Tags:

flutter

I'm trying to make a loading screen for my application, I'm using CircularProgressIndicator widget, but I want to know if there's a way to make it bigger in height and width, it's too small.

So, could someone help me with this?

like image 286
Joseph Arriaza Avatar asked Aug 17 '18 18:08

Joseph Arriaza


People also ask

How do you customize circular progress indicator in flutter?

Flutter provides a class called CircularProgressIndicator. To create a circular progress indicator we have to call its constructor. There are no required properties for this widget so we can directly call the constructor. Below is the basic example code to add circular progress indicator to our flutter application.

What is circular progress indicator?

CircularProgressIndicator , 4dp indicator/track thickness is used without animation for visibility change. Without customization, primaryColor will be used as the indicator color; the track is transparent.

How do I change the color of my circular progress indicator in flutter?

Step 1: Locate the CircularProgressIndicator of which you would like to change the color. Step 2: Add the valueColor property. Step 3: Assign the AlwaysStoppedAnimation() . Step 4: Inside the AlwaysStoppedAnimation(), add the color of your choice.

What is SizedBox in flutter?

SizedBox is a built-in widget in flutter SDK. It is a simple box with a specified size. It can be used to set size constraints to the child widget, put an empty SizedBox between the two widgets to get some space in between, or something else.


1 Answers

You can wrap your CircularProgressIndicator inside a SizedBox widget

   @override     Widget build(BuildContext context) {       return Container(         child: Center(           child: Column(             crossAxisAlignment: CrossAxisAlignment.center,             children: <Widget>[               SizedBox(                 child: CircularProgressIndicator(),                 height: 200.0,                 width: 200.0,               ),               SizedBox(                 child: CircularProgressIndicator(),                 height: 50.0,                 width: 50.0,               ),               SizedBox(                 child: CircularProgressIndicator(),                 height: 10.0,                 width: 10.0,               )             ],           ),         ),       ); 
like image 62
diegoveloper Avatar answered Sep 22 '22 17:09

diegoveloper