Flutter framework provides Material Design style linear progress bar ( LinearProgressIndicator) component, is look like, just like, is not mellow.
APP but many are designed in accordance with the Material Design style of play, a variety of both, we choose the most common type of look, here is the "Taobao APP-> Amoy buy" page inside the progress bar, or animated.
If the direct linear progress bar ( LinearProgressIndicatorcomponents do), there is no way to achieve the above progress bar. Normal, then encounter the following issues:
- Parameters can be set without rounded corners
- Component comes animation is an infinite loop
- Setting the
valueparameters would be no animation - No parameters can be set height
- No parameter may be provided in the middle of text components
However, the above problems can be solved, the following is a specific solution.
Set the fillet
Rounded corners is provided a method for the progress bar is cut rounded rectangle ( ClipRRect) components, rounded rectangle with cut ( ClipRRect) the linear progress bar assembly ( LinearProgressIndicator) can be a packaged assembly.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo 主页'),
),
// 圆角矩形剪裁（`ClipRRect`）组件，使用圆角矩形剪辑其子项的组件。
body: ClipRRect(
// 边界半径（`borderRadius`）属性，圆角的边界半径。
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: LinearProgressIndicator(
value: 0.6,
backgroundColor: Color(0xffFFE3E3),
valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),
),
),
);
}
}
Height and width is provided
Add height and width restrictions of the progress bar is not difficult method is to use the size of the block ( SizedBox) modular packaging linear progress bar ( LinearProgressIndicator) component.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo 主页'),
),
body: SizedBox(
height: 10.0,
width: 98.0,
// 圆角矩形剪裁（`ClipRRect`）组件，使用圆角矩形剪辑其子项的组件。
child: ClipRRect(
// 边界半径（`borderRadius`）属性，圆角的边界半径。
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: LinearProgressIndicator(
value: 0.6,
backgroundColor: Color(0xffFFE3E3),
valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),
),
),
),
);
}
}
Set the contents of the text
Configuration Description text inside the progress bar, and above, is to continue packaging (PS: Flutter's layout is really excessive packaging), with the stack ( Stack) component packaging linear progress bar ( LinearProgressIndicator) component.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo 主页'),
),
body: Stack(
children: <Widget>[
SizedBox(
height: 10.0,
width: 98.0,
// 圆角矩形剪裁（`ClipRRect`）组件，使用圆角矩形剪辑其子项的组件。
child: ClipRRect(
// 边界半径（`borderRadius`）属性，圆角的边界半径。
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: LinearProgressIndicator(
value: 0.6,
backgroundColor: Color(0xffFFE3E3),
valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),
),
),
),
Container(
height: 10.0,
width: 98.0,
padding: EdgeInsets.only(left: 7.0),
alignment: Alignment.centerLeft,
child: Text(
'已抢60%',
style: TextStyle(
color: Color(0xffFFFFFF),
fontSize: 8.0,
),
),
),
],
),
);
}
}
Animate
To animate the progress bar, you have to mention the animation controller ( AnimationController) and tweens ( Tween) component, the most animated Flutter can be used to achieve them. Specifically how to use them, please refer to the following code.
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
/// 当前的进度。
double currentProgress = 0.6;
// 动画相关控制器与补间。
AnimationController animation;
Tween<double> tween;
@override
void initState() {
// AnimationController({
// double value,
// Duration duration,
// String debugLabel,
// double lowerBound: 0.0,
// double upperBound: 1.0,
// TickerProvider vsync
// })
// 创建动画控制器
animation = AnimationController(
// 这个动画应该持续的时间长短。
duration: const Duration(milliseconds: 900),
vsync: this,
// void addListener(
// VoidCallback listener
// )
// 每次动画值更改时调用监听器
// 可以使用removeListener删除监听器
)..addListener(() {
setState(() {});
});
// Tween({T begin, T end })：创建tween（补间）
tween = Tween<double>(
begin: 0.0,
end: currentProgress,
);
// 开始向前运行这个动画（朝向最后）
animation.forward();
super.initState();
}
@override
void dispose() {
animation.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO：构建页面的主要内容。
}
}
In the above code, we have set the animation and tween, put the following linear progress bar ( LinearProgressIndicator) components valueattribute value is set to control the animation.
// TODO：构建页面的主要内容。
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo 主页'),
),
body: Stack(
children: <Widget>[
SizedBox(
height: 10.0,
width: 98.0,
// 圆角矩形剪裁（`ClipRRect`）组件，使用圆角矩形剪辑其子项的组件。
child: ClipRRect(
// 边界半径（`borderRadius`）属性，圆角的边界半径。
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: LinearProgressIndicator(
// Animation<T> animate(
// Animation<double> parent
// )
// 返回一个由给定动画驱动的新动画，但它承担由该对象确定的值
value: tween.animate(animation).value,
backgroundColor: Color(0xffFFE3E3),
valueColor: AlwaysStoppedAnimation<Color>(Color(0xffFF4964)),
),
),
),
Container(
height: 10.0,
width: 98.0,
padding: EdgeInsets.only(left: 7.0),
alignment: Alignment.centerLeft,
child: Text(
'已抢${(currentProgress * 100).toInt()}%',
style: TextStyle(
color: Color(0xffFFFFFF),
fontSize: 8.0,
fontFamily: 'PingFangRegular',
),
),
),
],
),
);
Such progress bar when building will begin to play the movie forward.