Flutter：开始使用画布

Question

我以前从未使用过画布，但是我必须做这样的事情：

https://imgur.com/a/pr91gZp

如果您知道一些不错的教程来开始学习画布，那将是一个很大的帮助。

如果您知道如何轻松制作此UI，请随时共享您的代码。

太好了！

Answer 1

您可以在没有Canvas的情况下实现所需的功能，请在下面查看我的代码：

  @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Column(
          children: <Widget>[
            SizedBox(
              height: 100.0,
              child: Stack(
                children: <Widget>[
                  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.green,
                          borderRadius: BorderRadius.only(
                              bottomLeft: Radius.elliptical(150.0, 50.0),
                              bottomRight: Radius.elliptical(150.0, 50.0))),
                    ),
                  ),
                  Align(
                      alignment: Alignment.center,
                      child: Text(
                        "My app title!",
                        style: TextStyle(color: Colors.white, fontSize: 25.0),
                      ))
                ],
              ),
            )
          ],
        ),
      );

Answer 2

这是一个简单的画布示例，它创建了一个圆形的进度条

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:core';

 class CircularProgress extends StatefulWidget{
 final double size;
 final Color backgroundColor;
 final Color color;
 CircularProgress({@required this.size, this.backgroundColor = Colors.grey, 
 this.color = Colors.blue});

 @override
  _CircularProgress createState() => new _CircularProgress();

}

class _CircularProgress extends State<CircularProgress> with 
 SingleTickerProviderStateMixin{

  AnimationController controller;
  Animation animation;

 @override
 void initState() {
// TODO: implement initState
controller = new AnimationController(vsync: this, duration: const 
Duration(milliseconds: 10000))..repeat();
animation = Tween(begin: 0.0, end: 360.0).animate(controller);
controller.addListener((){
  setState(() {

  });
});
 }

@override
Widget build(BuildContext context) {

 return new Stack(
  alignment: Alignment.center,
  children: <Widget>[

  new CustomPaint(
    painter: new CircularCanvas(progress: animation.value, backgroundColor: 
    widget.backgroundColor, color: widget.color),
    size: new Size(widget.size, widget.size),
  ),
  new Text('${(animation.value/360*100).round()}%',
  style: new TextStyle(color: widget.color, fontSize: widget.size/5, fontWeight: 
  FontWeight.bold),)
],);
 }
}

class CircularCanvas extends CustomPainter{
final double progress;
final Color backgroundColor;
final Color color;

CircularCanvas({this.progress, this.backgroundColor = Colors.grey, this.color = 
Colors.blue});
@override
void paint(Canvas canvas, Size size) {


var paint = new Paint();
paint..color = backgroundColor
..strokeWidth = size.width/20
..style = PaintingStyle.stroke;

 canvas.drawCircle(new Offset(size.width/2, size.height/2), size.width/2, paint);

  Rect rect = new Offset(0.0, 0.0)&size;
 //    paint..shader = new LinearGradient(colors: [Colors.white, color]
//    ,begin: Alignment.topRight, end: Alignment.bottomLeft).createShader(rect);

  canvas.drawArc(new Offset(0.0, 0.0)
  &new Size(size.width, size.width), -90.0*0.0174533, progress*0.0174533,
    false, paint..color = color);

}

@override
bool shouldRepaint(CircularCanvas oldDelegate) {
return oldDelegate.progress !=progress;
}

}

有关以下UI的完整代码，请点击此处