LinearProgressIndicator and CircularProgressIndicator progress bar Widget, the former for linear progress bar, the latter as the circular progress bar.
A, LinearProgressIndicator
The LinearProgressIndicator can implement precise progress and fuzzy progress in the Flutter. For example, waiting for the software installation to complete, we can use a fuzzy progress bar. It inherits from the ProgressIndicator.
const LinearProgressIndicator({
Key key,
double value,
Color backgroundColor,
Animation<Color> valueColor,
String semanticsLabel,
String semanticsValue,
})
Copy the codeValue —- indicates the current progress. The value ranges from 0 to 1. If value is null, the indicator executes a looping animation (blur progress); When value is not null, the indicator is a progress bar for a specific progress.
BackgroundColor —- backgroundColor
ValueColor —- Progress bar color. The value type is Animation, which allows us to specify the Animation for the color of the progress bar. If we do not need to animate the progress bar color and want to apply a fixed color to the progress bar, we can specify this by using AlwaysStoppedAnimation.
SemanticsLabel —- can be used to identify the purpose of this progress bar for screen reading software.
The semanticsValue —- attribute can be used to determine a progress indicator indicating how much progress has been made.
1.1 Precise linear progress bar
We set value to 0.6. In addition, SizedBox limits the width and height of the progress bar.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 400,
height: 10,
child: LinearProgressIndicator(
value: 0.6, backgroundColor: Colors.red, valueColor: AlwaysStoppedAnimation(Colors.blue), ), ), ]) ], )); }}Copy the code
1.2 Fuzzy linear progress bar
This is done by setting value to NULL.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
......
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 400,
height: 10,
child: LinearProgressIndicator(
value: null, backgroundColor: Colors.red, valueColor: AlwaysStoppedAnimation(Colors.blue), ), ), ]) ], )); }}Copy the codeThe second dynamic progress bar in the image below is the blur progress effect.
Second, the CircularProgressIndicator
Similar to the linear progress bar, there is only one more Field to set the thickness of the progress bar. Also inherited from the ProgressIndicator.
const CircularProgressIndicator({
Key key,
double value,
Color backgroundColor,
Animation<Color> valueColor,
this.strokeWidth = 4.0.String semanticsLabel,
String semanticsValue,
})
Copy the codeHere is the code to use.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
......
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
value: null,
backgroundColor: Colors.red,
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
),
]),
SizedBox(
height: 10,
child: null,
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 100,
height: 50,
child: CircularProgressIndicator(
value: 0.5, backgroundColor: Colors.red, valueColor: AlwaysStoppedAnimation(Colors.blue), ), ), ]) ], )); }}Copy the codeThe bottom two progress bars in the code use circular bars. We can see that when the parent Widget SizedBox is disproportionate in width and height, the circular bar becomes an ellipse.
Customize the animation progress bar
Let’s create a progress bar that changes color from yellow to blue as time goes on and progress to 100%.
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
@override
void initState() {
_animationController =
new AnimationController(vsync: this, duration: Duration(seconds: 5));
_animationController.forward();
_animationController.addListener(() => setState(() => {}));
super.initState();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
......
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
value: _animationController.value,
backgroundColor: Colors.red,
valueColor: ColorTween(begin: Colors.yellow, end: Colors.blue)
.animate(_animationController),
strokeWidth: 10() [[() [() [() }}Copy the code
The complete Demo code is as follows:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); }}class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
@override
void initState() {
_animationController =
new AnimationController(vsync: this, duration: Duration(seconds: 5));
_animationController.forward();
_animationController.addListener(() => setState(() => {}));
super.initState();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 400,
height: 10,
child: LinearProgressIndicator(
value: 0.6,
backgroundColor: Colors.red,
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
),
]),
SizedBox(
height: 10,
child: null,
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 400,
height: 10,
child: LinearProgressIndicator(
value: null,
backgroundColor: Colors.red,
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
),
]),
SizedBox(
height: 10,
child: null,
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
value: null,
backgroundColor: Colors.red,
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
),
]),
SizedBox(
height: 10,
child: null,
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 100,
height: 50,
child: CircularProgressIndicator(
value: 0.5,
backgroundColor: Colors.red,
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
),
]),
SizedBox(
height: 10,
child: null,
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
value: _animationController.value,
backgroundColor: Colors.red,
valueColor: ColorTween(begin: Colors.yellow, end: Colors.blue)
.animate(_animationController),
strokeWidth: 10() [[() [() [() }}Copy the code