英文:
How to cerate custom spinner in flutter
问题
如何在Flutter中创建一个自定义的旋转器并使用缓入动画进行动画处理。
我需要一个具有渐变颜色和圆角的旋转器，如下所示。
渐变色的十六进制代码为：
#FF9702, #FE6F27, #FE395D, #FE0096
旋转器图片。
如何实现。
英文:
How to create a custom spinner in flutter and how to make it animate with ease-in animation.
I need a spinner with gradient color with rounded corner as attached bellow.
The gradient Hex code are:
#FF9702, #FE6F27, #FE395D, #FE0096
The spinner image.
How to do it.
答案1
得分: 1
以下是您要翻译的代码部分：
class FourColorSpinner extends CustomPainter {
final double rotation;
final List<Color> colors;
FourColorSpinner(this.rotation, this.colors);
@override
void paint(Canvas canvas, Size size) {
double center = size.width / 2;
double radius = size.width / 4;
canvas.translate(center, center);
canvas.rotate(rotation * 2 * pi);
double colorStep = 1.0 / colors.length;
double currentStep = 0.0;
for (int i = 0; i < colors.length; i++) {
Paint paint = Paint()
..color = colors[i % colors.length]
..style = PaintingStyle.stroke
..strokeWidth = 4.0;
double startAngle = currentStep * 2 * pi;
double sweepAngle = colorStep * 2 * pi;
canvas.drawArc(
Rect.fromCircle(center: Offset(0, 0), radius: radius),
startAngle,
sweepAngle,
false,
paint,
);
currentStep += colorStep;
}
}
@override
bool shouldRepaint(FourColorSpinner oldDelegate) {
return oldDelegate.rotation != rotation;
}
}
class FourSpinner extends StatefulWidget {
@override
_FourSpinnerState createState() => _FourSpinnerState();
}
class _FourSpinnerState extends State<FourSpinner>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
double _rotation = 0.0;
List<Color> _spinnerColors = [Colors.blue, Colors.red, Colors.green, Colors.orange];
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
)..addListener(() {
setState(() {
_rotation = _controller.value;
});
});
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: FourColorSpinner(_rotation, _spinnerColors),
child: Container(
width: 100.0,
height: 100.0,
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: FourSpinner()),
],
),
),
);
}
}
希望这对您有所帮助。
英文:
This is a my code snippet you could try to work from it:
class FourColorSpinner extends CustomPainter {
final double rotation;
final List<Color> colors;
FourColorSpinner(this.rotation, this.colors);
@override
void paint(Canvas canvas, Size size) {
double center = size.width / 2;
double radius = size.width / 4;
canvas.translate(center, center);
canvas.rotate(rotation * 2 * pi);
double colorStep = 1.0 / colors.length;
double currentStep = 0.0;
for (int i = 0; i < colors.length; i++) {
Paint paint = Paint()
..color = colors[i % colors.length]
..style = PaintingStyle.stroke
..strokeWidth = 4.0;
double startAngle = currentStep * 2 * pi;
double sweepAngle = colorStep * 2 * pi;
canvas.drawArc(
Rect.fromCircle(center: Offset(0, 0), radius: radius),
startAngle,
sweepAngle,
false,
paint,
);
currentStep += colorStep;
}
}
@override
bool shouldRepaint(FourColorSpinner oldDelegate) {
return oldDelegate.rotation != rotation;
}
}
class FourSpinner extends StatefulWidget {
@override
_FourSpinnerState createState() => _FourSpinnerState();
}
class _FourSpinnerState extends State<FourSpinner>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
double _rotation = 0.0;
List<Color> _spinnerColors = [Colors.blue, Colors.red, Colors.green, Colors.orange];
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
)..addListener(() {
setState(() {
_rotation = _controller.value;
});
});
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: FourColorSpinner(_rotation, _spinnerColors),
child: Container(
width: 100.0,
height: 100.0,
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: FourSpinner()),
],
),
),
);
}
}
答案2
得分: 0
你可以使用flutter_spinkit库包，并根据需要修改代码。
英文:
You can use the flutter_spinkit library package and modify the code as necessary
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论