Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

flutter - How to show a line being drawn from one point to another?

I used canvas.drawLine to show a line but I want user to be able to see it being drawn from one point to another and also, if possible, control the duration of the animation. (something like progress bar but this is my custom widget)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

use a custom CustomPainter class that passes Animation to the super constructor - that way the CustomPainter#paint() method is automagically called on each "frame" of the animation:

class MyCustomPainter extends CustomPainter {
  List points;
  Paint linePaint;
  Animation anim;
  Size size = Size.zero;

  MyCustomPainter(Animation anim) : super(repaint: anim) {
    linePaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.red
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 16;
    this.anim = anim;
  }

  @override
  void paint(Canvas canvas, Size size) {
    if (size != this.size) {
      print('new size $size');
      this.size = size;
      Rect r = (Offset.zero & size).deflate(linePaint.strokeWidth * 1.5);
      points = [
        [r.topLeft, r.bottomLeft], // begins
        [r.bottomLeft, r.topRight], // ends
      ].map((o) => anim.drive(Tween(begin: o[0], end: o[1]))).toList();
    }
    canvas.drawLine(points[0].value, points[1].value, linePaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

the complete working code would look like this:

import 'package:flutter/material.dart';

void main() {
  runApp(AnimatedPainterTest());
}

class AnimatedPainterTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Builder(
          builder: (BuildContext context) {
            AnimationController controller = AnimationController(
              duration: Duration(milliseconds: 500),
              vsync: Scaffold.of(context),
            );
            return Column(
              children: <Widget>[
                RaisedButton(
                  onPressed: () => controller.forward(from: 0.0),
                  child: Text('press me to start the animation'),
                ),
                Expanded(
                  child: SizedBox.expand(
                    child: CustomPaint(
                      painter: MyCustomPainter(controller),
                    ),
                  ),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}

and the result is:

enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...