ChromiaLinearProgress
A customizable linear progress indicator that shows progress as a horizontal bar.
Basic Usage
ChromiaLinearProgress(
value: 0.7, // 70% complete
)
Indeterminate Progress
ChromiaLinearProgress() // No value = indeterminate
Parameters
The progress value (0.0 to 1.0). If null, shows indeterminate progress.
Background color of the progress bar
Color of the progress indicator
Height of the progress bar
Border radius of the progress bar
Whether to show a label with the percentage
Custom label builder function
With Label
ChromiaLinearProgress(
value: 0.65,
showLabel: true,
)
Custom Label
ChromiaLinearProgress(
value: 0.75,
showLabel: true,
labelBuilder: (value) => '${(value * 100).toInt()} percent complete',
)
Custom Styling
ChromiaLinearProgress(
value: 0.5,
height: 8,
color: Colors.green,
backgroundColor: Colors.grey[300],
borderRadius: BorderRadius.circular(8),
)
ChromiaCircularProgress
A customizable circular progress indicator that shows progress as a circular ring.
Basic Usage
ChromiaCircularProgress(
value: 0.7, // 70% complete
size: 50,
)
Indeterminate Progress
ChromiaCircularProgress() // No value = indeterminate
Parameters
The progress value (0.0 to 1.0). If null, shows indeterminate progress.
Size of the circular progress indicator
Width of the progress stroke
Background color of the progress circle
Color of the progress indicator
Whether to show a label with the percentage in the center
Custom label builder function
Custom child widget to display in the center
With Label
ChromiaCircularProgress(
value: 0.85,
size: 80,
showLabel: true,
)
Custom Child
ChromiaCircularProgress(
value: 0.6,
size: 100,
child: Icon(Icons.download, size: 32),
)
Custom Styling
ChromiaCircularProgress(
value: 0.45,
size: 60,
strokeWidth: 6,
color: Colors.blue,
backgroundColor: Colors.grey[200],
showLabel: true,
)
ChromiaSteppedProgress
A progress indicator with multiple segments, useful for showing progress through multiple steps.
Basic Usage
ChromiaSteppedProgress(
currentStep: 2,
totalSteps: 5,
)
Parameters
Current step (0-based index)
Height of each step indicator
Color for completed steps
Color for incomplete steps
Border radius of step indicators
Custom Styling
ChromiaSteppedProgress(
currentStep: 1,
totalSteps: 4,
height: 6,
spacing: 8,
activeColor: Colors.purple,
inactiveColor: Colors.grey[300],
)
In a Form
class MultiStepForm extends StatefulWidget {
@override
State<MultiStepForm> createState() => _MultiStepFormState();
}
class _MultiStepFormState extends State<MultiStepForm> {
int _currentStep = 0;
final int _totalSteps = 3;
void _nextStep() {
if (_currentStep < _totalSteps - 1) {
setState(() => _currentStep++);
}
}
void _previousStep() {
if (_currentStep > 0) {
setState(() => _currentStep--);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ChromiaAppBar(title: 'Registration'),
body: Column(
children: [
Padding(
padding: EdgeInsets.all(16),
child: ChromiaSteppedProgress(
currentStep: _currentStep,
totalSteps: _totalSteps,
),
),
Expanded(
child: _buildStepContent(),
),
Padding(
padding: EdgeInsets.all(16),
child: Row(
children: [
if (_currentStep > 0)
ChromiaButton(
label: 'Back',
onPressed: _previousStep,
),
Spacer(),
ChromiaButton(
label: _currentStep < _totalSteps - 1 ? 'Next' : 'Finish',
onPressed: _nextStep,
),
],
),
),
],
),
);
}
Widget _buildStepContent() {
switch (_currentStep) {
case 0:
return PersonalInfoStep();
case 1:
return ContactInfoStep();
case 2:
return ConfirmationStep();
default:
return Container();
}
}
}
Complete Example
class ProgressExample extends StatefulWidget {
@override
State<ProgressExample> createState() => _ProgressExampleState();
}
class _ProgressExampleState extends State<ProgressExample> {
double _progress = 0.0;
bool _loading = false;
Future<void> _startProgress() async {
setState(() {
_loading = true;
_progress = 0.0;
});
for (int i = 0; i <= 10; i++) {
await Future.delayed(Duration(milliseconds: 500));
setState(() {
_progress = i / 10;
});
}
setState(() => _loading = false);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ChromiaAppBar(title: 'Progress Example'),
body: Padding(
padding: EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text('Linear Progress', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
SizedBox(height: 16),
ChromiaLinearProgress(
value: _progress,
showLabel: true,
),
SizedBox(height: 32),
Text('Circular Progress', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ChromiaCircularProgress(
value: _progress,
showLabel: true,
size: 80,
),
if (_loading)
ChromiaCircularProgress(), // Indeterminate
],
),
SizedBox(height: 32),
Text('Stepped Progress', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
SizedBox(height: 16),
ChromiaSteppedProgress(
currentStep: (_progress * 4).toInt(),
totalSteps: 5,
),
SizedBox(height: 32),
ChromiaButton(
label: _loading ? 'Loading...' : 'Start Progress',
onPressed: _loading ? null : _startProgress,
),
],
),
),
);
}
}
