如何在 Flutter 中为自定义画家的颜色设置动画？

debugcn 发表于 Dev

约翰·沃尔豪特

我正在尝试在 Flutter 中为进度条设置动画。到目前为止，我可以使用 CustomPainter 类绘制进度条:)

我的目标是制作第一个栏（custompainter），就像第二个栏一样：

我找到了很多例子来制作一个 redical 进度条，但那只是一个 CustomPainter。我（认为）我需要更多单独的自定义画家来绘制孔线，如下所示：

但是现在我想在我被卡住的第一个点开始动画，我应该传递什么以及如何作为值传递给第一个圆圈？接下来，我必须为线条设置动画。

到目前为止，这是我的代码（GitHub 要点）：https : //gist.github.com/LiveLikeCounter/a1dffbe8953d39aa4af32c8f4dfc6553

非常感谢你提前！

Stackoverflow 之子

您可以将 Row 小部件与Container和LinearProgressIndicator

由于我不知道应用程序的其余部分，我将提供一个示例小部件树供您参考。

小部件树：

Row(
  children: <Widget>[
    Container([...]),
    LinearProgressIndicator([...]),
    Container([...]),
    LinearProgressIndicator([...]),
    Container([...]),
    ]
)

Container与color过渡一起做一个圆形，

AnimatedContainer(
duration: Duration(seconds:2),
width: x,
height: x,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(x/2),
// color: (progressvalue>200)? Colors.yellow : Colors.grey 
)
)

示例逻辑：

Container1 - progressValue > 0  
LinearProgressIndicator - (progressValue-10) to 110 
Container2 - progressValue > 110 
LinearProgressIndicator - (progressValue-120) to 220 
Container2 - progressValue > 220

可以根据您的方便修改上述逻辑。

的工作示例LinearProgressIndicator，

import 'dart:async';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Slider Demo'),
      ),
      body: new Container(
        color: Colors.blueAccent,
        padding: new EdgeInsets.all(32.0),
        child: new ProgressIndicatorDemo(),
      ),
    );
  }
}

class ProgressIndicatorDemo extends StatefulWidget {

  @override
  _ProgressIndicatorDemoState createState() =>
      new _ProgressIndicatorDemoState();
}

class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });
    controller.repeat();
  }


  @override
  void dispose() {
    controller.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Container(
          child:  LinearProgressIndicator( value:  animation.value,),

        )
    );
  }

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。