How to pass PointMode into Canvas.drawPoints(..) in Flutter? - dart

Question

I am calling the function drawPoints as below, which follows the API-doc
final paint = new Paint()
..color = Colors.blue[400]
..strokeCap = StrokeCap.round;
var offsetList = [new Offset(2.0, 5.0), new Offset(50.0, 100.0)];
canvas.drawPoints(const PointMode(1), offsetList, paint);
When I pass in const PointMode(1) into the canvas.drawPoints, it throws compiler error. What is the correct way to passing PointMode into this function?

Answer 1

It's correct to use
canvas.drawPoints(PointMode.points, offsetList, paint);
but for the definition you must import 'dart:ui'.

Answer 2

As Alessio Ricci said, you need to import dart:ui. Here is a fuller answer to see everything in context.
How to draw points in Flutter
To paint in Flutter you use the CustomPaint widget. The CustomPaint widget takes a CustomPainter object as a parameter. In that class you have to override the paint method, which gives you a canvas that you can paint on. Here is the code to draw the points in the image above.
#override
void paint(Canvas canvas, Size size) {
final pointMode = ui.PointMode.points;
final points = [
Offset(50, 100),
Offset(150, 75),
Offset(250, 250),
Offset(130, 200),
Offset(270, 100),
];
final paint = Paint()
..color = Colors.black
..strokeWidth = 4
..strokeCap = StrokeCap.round;
canvas.drawPoints(pointMode, points, paint);
}
Notes:
When using low level methods from dart:ui it is a common practice to prefix the classes with ui..
You should stay within the bounds of size.
An Offset is a pair of (dx, dy) doubles, offset from the top left corner, which is (0, 0).
If you don’t set the color, the default is white.
Other options
You can connect the points if you use the PointMode.polygon option.
Using the PointMode.lines option only accepts pairs of lines. Notice that the last point is discarded.
Context
Here is the main.dart code so that you can see it in context. Note the 'dart:ui' as ui import.
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: HomeWidget(),
),
);
}
}
class HomeWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: CustomPaint( // <-- CustomPaint widget
size: Size(300, 300),
painter: MyPainter(),
),
);
}
}
class MyPainter extends CustomPainter { // <-- CustomPainter class
#override
void paint(Canvas canvas, Size size) {
// <-- Insert your painting code here.
}
#override
bool shouldRepaint(CustomPainter old) {
return false;
}
}
See also
See this article for my fuller answer about CustomPaint.

Answer 3

PointMode is an enum, you can not instantiate it. You can check all the available PointModes from here.
To specify PointMode in drawPoints method, you can just change
canvas.drawPoints(const PointMode(1), offsetList, paint);
to
canvas.drawPoints(PointMode.points, offsetList, paint);