Q:

Flutter: Starting to use canvas

I've never use canvas before but i have to do something like this:
https://imgur.com/a/pr91gZp
If you know some good tutorial to start learning about canvas it would be a great help.
If you know how to make this UI easily, feel free to share your code.
Ty a lot!

A:

You can make what you need without Canvas, check my code below:
  @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),
                      ))
                ],
              ),
            )
          ],
        ),
      );

A:

This is the simple canvas example which create a Circular progressbar
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;
}

}

for complete code of below UI check here

