How to change the colour of Circular Progress Indicator

Home » Blog » How to change the colour of Circular Progress Indicator

daadbin
December 11, 2022
1,464 Comments

How to change the colour of CircularProgressIndicator – You must have encountered the time to load data before displaying it on the screen when building in Flutter during API calls or other activities. In such a situation, the circular progress indicator comes into play. In such situations, you may have included the circular progress indicator in your app.However, you may wish to occasionally modify the circular progress indicator’s colour. So, in this article, we’ll look at how to modify the colour of the circular progress indicator as a leading Flutter app development company.

What is the circular progress indicator in Flutter?

The circular Progress Indicator is a flutter material widget. The screen displays a tiny animated round icon; a circular progress indicator widget notifies the user that the application is busy.When the app is busy, it prevents the user from engaging with it. It’s utilized for things like downloading and uploading material, retrieving data from an API and processing data.

Why do you need to change the colour of the circular progress indicator?

The animated circular icon on your screen will reflect the default colour. This situation occurs as it uses the primarySwatchcolour specified already in the theme after adding the Circular Progress Indicator to your website.For instance, it will appear blue if the circular progress indicator is blue-themed. Most of the time, you will need to modify or customize the default colour, which is pre-existing as decided by your theme designer.

How to change the colour in the circular progress indicator in Flutter?

In Flutter, you can change the colour of the circular progress indicator by modifying the valueColor property of the CircularProgressIndicator widget to the desired colour.

The steps to change the colour of the little icon in the Circular progress indicator in Flutter are mentioned below:

Step 1: The first step is to locate the CircularProgressIndicator in your program, of which you want to change the colour.

Step 2: The next step is to add the valueColor property to the circular progress indicator widget of Flutter.

Step 3: Now, assign the AlwaysStoppedAnimation() to the widget class.

Step 4: Inside the AlwaysStoppedAnimation() class, you will find the option to add the colour of your preference.

Step 5: You can also modify the background theme and colour of the CircularProgressIndicator widget by adding the backgroundColor parameter in the class and modifying it to the desired colour.CircularProgressIndicator may be used to track both determinate and indeterminate progress.When you need to represent the progress of an ongoing activity, such as the percentage of conversion that occurred when saving a file, a determined progress bar plays an important role. You must enter a number between 0.0 and 1.0 to demonstrate progress.An indeterminate progress indicator might be useful when you don’t know what proportion of a task you’re working on. Therefore, CircularProgressIndicator is set to act as an indeterminate toolbar by default.

An illustration of a determinate Circular Progress indicator

According to the code, the progress is initially set to 0.2 (20 per cent progress), then changed to 0.6 after a 1000ms (1sec) delay (60 per cent).When you use a definite circular progress indicator widget in your application, you usually obtain the progress from the background job you’re working on. Once you’ve reached 100%, or 1.0, you can hide the tiny circular indicator and continue using the programme normally.import’package:flutter/material.dart’;

voidmain() {

runApp(MaterialApp(

home: MyApp(),

));

}

classMyApp extends StatefulWidget {

@override

_MyAppStatecreateState() => _MyAppState();

}

class_MyAppState extends State<MyApp> {

Icon fab = Icon(

Icons.refresh,

);

boolshowProgress = false;

doubleprogress = 0.2;

voidtoggleSubmitState() {

setState(() {

showProgress = !showProgress;

});

}

@override

Widget build(BuildContext context) {

returnScaffold(

appBar: AppBar(

title: newText(“Flutter – tutorialkart.com”),

body: Center(

child: showProgress

? CircularProgressIndicator(value:progress)

: Text(‘Click on Refreseh button below’, style: TextStyle(fontSize: 20),)),

floatingActionButton: FloatingActionButton(

child: fab,

onPressed: () =>setState(() {

showProgress = !showProgress;

if(showProgress) {

Future.delayed(constDuration(milliseconds: 1000), () {

setState(() {

progress = 0.6;

});

fab = Icon(

Icons.stop,

);

} else{

fab = Icon(Icons.refresh);

}

}),

);

}

An illustration of anindeterminate Circular Progress indicator

We’re using CircularProgressIndicator in an indeterminate mode in this example. It does not display any progress but instead circles incessantly, signalling to the viewer that something is working in the background and that he may need to wait.You should not supply any value to the function Object() { [native code] } CircularProgressIndicator if you want to utiliseCircularProgressIndicator in indeterminate mode ().

import’package:flutter/material.dart’;

voidmain() {

runApp(MaterialApp(

home: MyApp(),

));

}

classMyApp extends StatefulWidget {

@override

_MyAppStatecreateState() => _MyAppState();

}

class_MyAppState extends State<MyApp> {

Icon fab = Icon(

Icons.refresh,

);

boolshowProgress = true;

voidtoggleSubmitState() {

setState(() {

showProgress = !showProgress;

});

}

@override

Widget build(BuildContext context) {

returnScaffold(

appBar: AppBar(

title: newText(“Flutter – tutorialkart.com”),

body: Center(

child: showProgress

? CircularProgressIndicator()

: Text(‘Click on Refreseh button below’, style: TextStyle(fontSize: 20),)),

floatingActionButton: FloatingActionButton(

child: fab,

onPressed: () =>setState(() {

showProgress = !showProgress;

if(showProgress) {

fab = Icon(

Icons.stop,

);

} else{

fab = Icon(Icons.refresh);

}

}),

);

}

Apart from changing the icon’s colour, we can also customize & style the widget with different properties in the flutter application. These different properties are –

Value

Value property is used to show the percentage of a job that is presently executing that has been completed. It accepts any numeric value between 0 and 1, with 0 indicating the initial stage of the task and 1 indicating the final stage

valueColor

valueColor parameter is used to colour the value indication. It accepts any given colour as a value.

backgroundColor

This attribute will adjust the background colour of the circular progress indication. It uses any given colour as a value.

strokeWidth

This attribute will be used to modify the width of the progress indicator’s stroke. It is worth twice as much the value.

Conclusion

BOSC Tech Labs is a leading Flutter service provider company with years of experience in custom mobile app solution for various industries. Customizing colours, styles, and themes is always an attraction to the users’ eye. Flutter enables all such options for you in its applications. Moreover, the colour modification feature provided in Flutter to change the icon colour of the circular progress indicator is very simple and smooth.