How to plot some points in an asset image using custom painter - Flutter?

Question

I have an asset image which update UI view. Also have some coordinates (x-y ) which is stored in SqfLite database as double.The coordinate( that is double value) value is depends on the image property(ie, width and height). After fetching the double value from database, i want to plot this points as circle in my asset image. after that it should be update the UI view

question from:https://stackoverflow.com/questions/65839193/how-to-plot-some-points-in-an-asset-image-using-custom-painter-flutter

Answer 1

To draw circle on canvas, use drawCircle() method of Canvas class. Following is the syntax of drawCircle() method.

void drawCircle (
  Offset c,
  double radius,
  Paint paint
)

Example In the following example, we draw a circle on the canvas by following these steps.

Create a class OpenPainter which extends CustomPainter. Override paint() method and shouldRepaint() method as shown below. In the paint method, using canvas object, make a call to drawCircle() method. Include CustomPaint widget in your UI. For the painter property, assign OpenPainter(). When the UI is rendered, OpenPainter() object is used to paint the widget.

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
        backgroundColor: Color(0xFF444444),
      ),
      body: ListView(children: <Widget>[
        Text(
          'Canvas',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20, height: 2),
        ),
        Container(
          width: 400,
          height: 400,
          child: CustomPaint(
            painter: OpenPainter(),
          ),
        ),
      ]),
    );
  }
}

class OpenPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..style = PaintingStyle.fill;
    //a circle
    canvas.drawCircle(Offset(200, 200), 100, paint1);
  }

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

In the Code Let us understand what arguments we gave to drawCircle() method.

canvas.drawCircle(Offset(200, 200), 100, paint1);

First Argument: We have given an offset of (200, 200). The top left coordinates of the square surrounding the circle is (200, 200). The top left corner of the canvas have an offset of (0, 0).

Second Argument: The circle shall have a radius of 100.

Third Argument: The circle is rendered onto the canvas using the paint defined by the this object. You may change the color of circle, fill property of the circle, etc., using this paint object.

Creadit to https://googleflutter.com/flutter-draw-circle-on-canvas/