Feedback

Determinate Progress

Displays a determinate linear indicator showing the completion progress of a task.

API Reference
1class DeterminateProgressExample extends StatefulWidget {
2 @override
3 State<DeterminateProgressExample> createState() =>
4 _DeterminateProgressExampleState();
5}
6
7class _DeterminateProgressExampleState
8 extends State<DeterminateProgressExample> {
9 late Timer _timer = Timer(
10 const Duration(seconds: 1),
11 () => setState(() => _value = 0.7),
12 );
13 double _value = 0.2;
14
15 @override
16 void dispose() {
17 _timer.cancel();
18 super.dispose();
19 }
20
21 @override
22 Widget build(BuildContext _) => Column(
23 mainAxisAlignment: .center,
24 spacing: 20,
25 children: [
26 FDeterminateProgress(value: _value),
27 FButton(
28 child: const Text('Reset'),
29 onPress: () => setState(() {
30 _value = 0.2;
31 _timer.cancel();
32 _timer = Timer(
33 const Duration(seconds: 1),
34 () => setState(() => _value = 0.7),
35 );
36 }),
37 ),
38 ],
39 );
40}
41

CLI

To generate and customize this style:

dart run forui style create determinate-progress

Usage

FDeterminateProgress(...)

1FDeterminateProgress(
2 style: .delta(constraints: .tightFor(height: 10.0)),
3 semanticsLabel: 'Loading 50%',
4 value: 0.5,
5)

Circular Progress

Displays an indeterminate circular indicator showing the completion progress of a task.

Progress

Displays an indeterminate linear indicator showing the completion progress of a task.

On this page

CLI
Usage
FDeterminateProgress(...)