LinearProgressIndicator and the progress bar is CircularProgressIndicator Widget, linear progress of the former, the latter is circular progress bar.
一、LinearProgressIndicator
In Flutter progress in LinearProgressIndicator can achieve precise and fuzzy progress. For example, wait for the software installation is complete, we can use a blur progress bar. It inherits from ProgressIndicator.
const LinearProgressIndicator({
Key key,
double value,
Color backgroundColor,
Animation<Color> valueColor,
String semanticsLabel,
String semanticsValue,
})
---- represents the current value of the schedule, in the range [0,1]; if the value is a pointer executes animation loop (blur progress) is null; When the value is not null, the pointer to a specific progress bar progress.
backgroundColor ---- Background Color
valueColor ---- progress bar color. This value is the type of Animation, which allows us the color of the progress bar can be specified animation. If we do not need to perform color animated progress bar, the progress bar would like to use a fixed color, this time can be specified by AlwaysStoppedAnimation.
semanticsLabel ---- it can be used for the purpose of identifying this progress bar, for screen reading software.
semanticsValue ---- property can be used to determine the progress indicator, indicating how much progress has been made.
Exact Linearization progress bar 1.1
We set value is 0.6. Additionally limits the width and height of SizedBox 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),
),
),
])
],
));
}
}
Fuzzy linear progress bar 1.2
The value is set to null can be achieved.
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),
),
),
])
],
));
}
}
The figure is a second dynamic progress bar progress blur effect.
二、CircularProgressIndicator
And similar linear progress bar only one more set the progress bar thickness Field. Also inherited from ProgressIndicator.
const CircularProgressIndicator({
Key key,
double value,
Color backgroundColor,
Animation<Color> valueColor,
this.strokeWidth = 4.0,
String semanticsLabel,
String semanticsValue,
})
Here is the code.
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),
),
),
])
],
));
}
}
Code in the bottom two progress bars is the use of circular progress bar, we see that when the parent Widget SizedBox wide disproportionately high when painted circular progress bar becomes an ellipse.
Second, the custom animation progress bar
Let's create a progress bar, color over time will change from yellow to blue, while progress go 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,
),
),
])
],
));
}
}
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,
),
),
])
],
));
}
}
