Feedback

Determinate Progress

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

class Progress extends StatefulWidget {
  @override
  State<Progress> createState() => _State();
}

class _State extends State<Progress> {
  late Timer _timer = Timer(const Duration(seconds: 1), () => setState(() => _value = 0.7));
  double _value = 0.2;

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Column(
    mainAxisAlignment: MainAxisAlignment.center,
    spacing: 20,
    children: [
      FDeterminateProgress(value: _value),
      FButton(
        child: const Text('Reset'),
        onPress: () => setState(() {
          _value = 0.2;
          _timer.cancel();
          _timer = Timer(const Duration(seconds: 1), () => setState(() => _value = 0.7));
        }),
      ),
    ],
  );
}

CLI

To generate and customize this style:

dart run forui style create determinate-progress

Usage

FDeterminateProgress(...)

FDeterminateProgress(
  value: 0.7,
  style: (style) => style.copyWith(...),
  semanticsLabel: 'Label',
);

On this page