CustomPaint class – класс для рисования

Статья написана для старой версии Flutter и сейчас обновляется. Часть кода может не компилироваться на актуальной версии.

Наследование: Object ❯ Diagnosticable ❯ DiagnosticableTree ❯ Widget ❯ RenderObjectWidget ❯ SingleChildRenderObjectWidget ❯ CustomPaint

Виджет-класс, создает «холст» для рисования. Прорисовывается во время фазы рисования (например, когда прорисовываются виджеты на экране и во время смены их состояний).

В момент прорисовки, вначале вызывается параметр painter , тут должен быть «художник» – объект от абстрактного супер класса CustomPainter , после прорисовывается виджет в параметре child – тут могут быть любые виджеты, последним для рисования вызывается параметр foregroundPainter с объектом «художник».

Параметры класса:

  • foregroundPainter → CustomPainter «Художник» для верхнего слоя final
  • isComplex → bool final
  • painter → CustomPainter «Художник» для нижнего слоя final
  • size → Size final
  • willChange → bool final
  • child → Widget Виджет-наследник прорисовывается в среднем слое между foregroundPainter и painter. final, inherited
  • hashCode → int read-only, inherited
  • key → Key read-only, inherited
  • runtimeType → Type read-only, inherited

Конструктор класса CustomPaint

CustomPaint({Key key, CustomPainter painter, CustomPainter foregroundPainter, Size size: Size.zero, bool isComplex: false, bool willChange: false, Widget child })

Создает виджет для рисования.

CustomPaint порядок прорисовки слоев: 1. painter; 2. child; 3. foregroundPainter.
CustomPaint порядок прорисовки слоев: 1. painter; 2. child; 3. foregroundPainter.

Пример использования

import 'package:flutter/material.dart';

class MyPaintBottom extends CustomPainter {
  Paint _paintLine = new Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.fill;

  void paint(Canvas canvas, Size size){
    print('size ${size}');
    print('draw Circle blue');

    canvas.drawCircle(new Offset(250.0, 400.0), 100.0, _paintLine);
  }// paint

  bool shouldRepaint(MyPaintBottom old) => false;
}/* MyPaintBottom */

class MyPaintTop extends CustomPainter {
  void paint(Canvas canvas, Size size){
    print('draw Circle red');

    canvas.drawCircle(new Offset(330.0, 380.0), 50.0, Paint()..color=Colors.red..style=PaintingStyle.stroke..strokeWidth = 5.0);
  }// paint

  bool shouldRepaint(MyPaintTop old) => false;
}/* MyPaintTop */

void main() =>  runApp(
    new MaterialApp(
        debugShowCheckedModeBanner: false,
        home: new Scaffold(
            appBar: new AppBar(),
            body: new CustomPaint(
                painter: new MyPaintBottom(),
                child: new Center(child: new FlatButton(onPressed: (){}, child: new Text('Hello Paint', style: TextStyle(fontSize: 40.0)))),
                foregroundPainter: MyPaintTop()
          ) // CustomPaint
        ) // Scaffold
    )// MaterialApp
);
CustomPaint пример использования.
CustomPaint пример использования.