If you want to express that your Flutter App is making progress or working on something? Flutter has widgets for that! Use CircularProgressIndicator()
if you want to indicate progress in a roundabout fashion, and LinearProgressIndicator()
if you like lines. The APIs are almost identical. Both progress indicators have determinate and indeterminate formats.
Use the determinate version if you want to indicate the actual amount of progress that the app is making on a task. Use the indeterminate version if you just want to show that the app is working on the task without making any promises about the remaining length of time.
Change Color
By default, the progress indicators will use the color from your theme’s accentColor
. You can also set a custom color with the valueColor
parameter.
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
padding: EdgeInsets.all(8.0),
child: is_loading
? LinearProgressIndicator(
backgroundColor: Colors.blue,
valueColor: AlwaysStoppedAnimation<Color>(Colors.yellow),
)
: Text("Press button to save"),
)),
This value can be animated, so if you just want a single color, use AlwaysStoppedAnimation
. By setting the backgroundColor
parameter for a secondary color that your progress indicator will fill on completion.
Progressbar Animation
But you can achieve some really neat effects bypassing in color animations.
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
bool is_loading = false;
AnimationController controller;
Animation<Color> colorTween;
@override
void initState() {
controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 200));
colorTween = controller.drive(new ColorTween(begin: Colors.greenAccent, end: Colors.deepOrange));
controller.repeat();
super.initState();
}
void _progress_state() {
setState(() {
is_loading = !is_loading;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
padding: EdgeInsets.all(8.0),
child: is_loading
? LinearProgressIndicator(
valueColor: colorTween,
)
: Text("Press button to save"),
)),
floatingActionButton: FloatingActionButton(
onPressed: _progress_state,
tooltip: 'Save Content',
child: Icon(Icons.save),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Determinate Progressbar
For a determinate progress bar, set the value
parameter to indicate the fraction of completion. Depending on your situation, you may need to call setState
or wrap your indicator in an AnimatedBuilder
, StreamBuilder
, or similar, to rebuild with updated values.
Set Stroke
CircularProgressIndicator()
has one unique parameter, which is the strokeWidth
, to make your progress indicator skinnier or fatter.
CircularProgressIndicator(
valueColor: colorTween,
strokeWidth: 4.0,
)
No comments:
Post a Comment
Note: only a member of this blog may post a comment.