Creating Custom Progress Indicators in Flutter

This tutorial will guide you through creating both linear and circular progress indicators with custom styling in Flutter.

Linear Progress Indicator

Step 1: Set up the SizedBox

We start by defining a SizedBox to constrain our progress indicator’s width:

SizedBox(
  width: 200,
  child: // Our progress indicator will go here
)

Step 2: Add rounded corners with ClipRRect

To give our progress indicator rounded corners, we’ll use ClipRRect:

ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: // Our LinearProgressIndicator will go here
)

Step 3: Create the LinearProgressIndicator

Now, let’s add the LinearProgressIndicator with custom colors:

LinearProgressIndicator(
value: 0.7,
valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF545CEA)),
backgroundColor: Color(0xFFCBD5E1),
minHeight: 8,
)

Step 4: Combine all elements

Put it all together:

SizedBox(
width: 200,
child: ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(10)),
  child: LinearProgressIndicator(
    value: 0.7,
    valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF545CEA)),
    backgroundColor: Color(0xFFCBD5E1),
    minHeight: 8,
  ),
),
)

Circular Progress Indicator

Step 1: Create the CircularProgressIndicator

For the circular progress indicator, we’ll use the CircularProgressIndicator widget:

CircularProgressIndicator(
value: 0.7,
valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF545CEA)),
backgroundColor: Color(0xFFCBD5E1),
strokeWidth: 8,
)

Step 2: Customize size (optional)

If you want to control the size of the circular indicator, wrap it in a SizedBox:

SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
  value: 0.7,
  valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF545CEA)),
  backgroundColor: Color(0xFFCBD5E1),
  strokeWidth: 8,
),
)

Final Notes

Remember to import the necessary Flutter packages:
```
import 'package:flutter/material.dart';
```
Place these widgets within a build method of a StatelessWidget or StatefulWidget.
The value property (0.7 in our examples) represents 70% progress. Adjust this value between 0.0 and 1.0 to change the progress level.
Colors and dimensions can be customized to fit your app’s design.

By following these steps, you’ll create custom progress indicators that match the ones shown in the image. Feel free to adjust values and experiment with different styles to suit your needs!