[英]How to make a linear progress indicator with swing effect?
我想做一個看起來像這樣的進度條。 如果您仔細觀察,指標在擺動時的長度會有所不同。
我試圖重用顫振提供的線性進度條。
import 'package:flutter/material.dart';
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget>
with TickerProviderStateMixin {
late AnimationController controller;
@override
void initState() {
controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 5),
)..addListener(() {
setState(() {});
});
controller.repeat(reverse: true);
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
LinearProgressIndicator(
value: controller.value,
),
],
),
),
);
}
}
它看起來像這樣。
你可以按照這個片段。 在dartPad上運行
/// create ---- ProgressIndicator
///
/// ````
/// child: SizedBox(
/// height: 12,
/// child: CustomLinearProgressIndicator(
/// backgroundColor: Colors.white,
/// color: Colors.blue,
/// maxProgressWidth: 100,
/// ),
/// ),
/// ````
class CustomLinearProgressIndicator extends StatefulWidget {
const CustomLinearProgressIndicator({
Key? key,
this.color = Colors.blue,
this.backgroundColor = Colors.white,
this.maxProgressWidth = 100,
}) : super(key: key);
/// max width in center progress
final double maxProgressWidth;
final Color color;
final Color backgroundColor;
@override
State<CustomLinearProgressIndicator> createState() =>
_CustomLinearProgressIndicatorState();
}
class _CustomLinearProgressIndicatorState
extends State<CustomLinearProgressIndicator>
with SingleTickerProviderStateMixin {
late AnimationController controller =
AnimationController(vsync: this, duration: const Duration(seconds: 1))
..addListener(() {
setState(() {});
})
..repeat(reverse: true);
late Animation animation =
Tween<double>(begin: -1, end: 1).animate(controller);
@override
Widget build(BuildContext context) {
return ColoredBox(
color: widget.backgroundColor,
child: Align(
alignment: Alignment(animation.value, 0),
child: Container(
decoration: ShapeDecoration(
// play with BoxDecoration if you feel it is needed
color: widget.color,
shape: const StadiumBorder(),
),
// you can use animatedContainer, seems not needed
width: widget.maxProgressWidth -
widget.maxProgressWidth * (animation.value as double).abs(),
height: double.infinity,
),
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.