Класс Canvas

Класс Canvas принимает команды рисования: прямоугольник, круг, линия, контур. Его передают в метод paint у CustomPainter. Сами виджеты холст не создают. Чем рисовать, задаёт Paint: цвет, толщина, заливка или контур.

Синтаксис

canvas.drawRect(rect, paint)

Методы

Метод	Описание
`clipPath`	Обрезает рисунок по `Path`.
`clipRRect`	Обрезает рисунок по скруглённому прямоугольнику.
`clipRect`	Обрезает последующий рисунок по прямоугольнику.
`drawArc`	Рисует дугу по эллипсу.
`drawCircle`	Рисует круг.
`drawImage`	Рисует bitmap в `Rect`.
`drawLine`	Рисует отрезок между двумя точками.
`drawOval`	Рисует овал внутри `Rect`.
`drawParagraph`	Рисует текст через Paragraph.
`drawPath`	Рисует контур `Path`.
`drawRRect`	Рисует скруглённый прямоугольник.
`drawRect`	Рисует прямоугольник.
`restore`	Возвращает состояние после save.
`rotate`	Поворачивает систему координат.
`save`	Сохраняет текущее состояние `Canvas`.
`saveLayer`	Рисует в отдельный слой с прозрачностью.
`scale`	Масштабирует систему координат.
`translate`	Сдвигает систему координат.

Пример

Давайте нарисуем прямоугольник:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
				child: CustomPaint(
				size: const Size(220, 100),
				painter: _CanvasDemo(),
				),
				),
			),
		),
	);
}
class _CanvasDemo extends CustomPainter
{
@override
void paint(Canvas canvas, Size size)
{
	canvas.drawRect(Rect.fromLTWH(24, 24, 160, 56), Paint()..color = Colors.blue);
}

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

На экране синий прямоугольник.

Пример

Давайте добавим круг:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
				child: CustomPaint(
				size: const Size(220, 100),
				painter: _CanvasDemo2(),
				),
				),
			),
		),
	);
}
class _CanvasDemo2 extends CustomPainter
{
@override
void paint(Canvas canvas, Size size)
{
	canvas.drawCircle(Offset(110, 52), 36, Paint()..color = Colors.orange);
}

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

На экране оранжевый круг.

Смотрите также

класс CustomPainter,
код рисунка
виджет CustomPaint,
свой рисунок
класс Paint,
кисть холста
класс Path,
контур фигуры