flutteropen
Published in

flutteropen

Canvas tutorial 01 | How to use the canvas in the flutter?

0. What we will create?

Logo of Flutter Open

1. Coordinate or Size of picture

The notes of circles with center coordinate and radius.
the rotate upward flutter logo with point coordinate
const BLUE_NORMAL = Color(0xff54c5f8);
const GREEN_NORMAL = Color(0xff6bde54);
const BLUE_DARK2 = Color(0xff01579b);
const BLUE_DARK1 = Color(0xff29b6f6);

2. Design Size VS Device Logical Size

import 'package:flutter/material.dart';
import 'dart:math';
class
SizeUtil {
static const _DESIGN_WIDTH = 580;
static const _DESIGN_HEIGHT = 648;

//logic size in device
static Size _logicSize;

//device pixel radio.

static get width {
return _logicSize.width;
}

static get height {
return _logicSize.height;
}

static set size(size) {
_logicSize = size;
}

//@param w is the design w;
static double getAxisX(double w) {
return (w * width) / _DESIGN_WIDTH;
}

// the y direction
static double getAxisY(double h) {
return (h * height) / _DESIGN_HEIGHT;
}

// diagonal direction value with design size s.
static double getAxisBoth(double s) {
return s *
sqrt((width * width + height * height) /
(_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
}
}
SizeUtil.size = MediaQuery.of(context).size;

3. Define CustomPainter

class OpenPainter extends CustomPainter {@override
void paint(Canvas canvas, Size size) {
if (size.width > 1.0 && size.height > 1.0) {
print(">1.9");
SizeUtil.size = size;
}
var paint = Paint()
..style = PaintingStyle.fill
..color = BLUE_NORMAL
..isAntiAlias = true;
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
void _drawFourShape(Canvas canvas,
{Offset left_top,
Offset right_top,
Offset right_bottom,
Offset left_bottom,
Size size,
paint}) {
left_top = _convertLogicSize(left_top, size);
right_top = _convertLogicSize(right_top, size);
right_bottom = _convertLogicSize(right_bottom, size);
left_bottom = _convertLogicSize(left_bottom, size);
var path1 = Path()
..moveTo(left_top.dx, left_top.dy)
..lineTo(right_top.dx, right_top.dy)
..lineTo(right_bottom.dx, right_bottom.dy)
..lineTo(left_bottom.dx, left_bottom.dy);
canvas.drawPath(path1, paint);
}
Offset _convertLogicSize(Offset off, Size size) {
return Offset(SizeUtil.getAxisX(off.dx), SizeUtil.getAxisY(off.dy));
}
var circleCenter = Offset(SizeUtil.getAxisX(294), SizeUtil.getAxisY(175));
paint.color = BLUE_NORMAL;
canvas.drawCircle(circleCenter, SizeUtil.getAxisBoth(174), paint);
paint.color = GREEN_NORMAL;
canvas.drawCircle(circleCenter, SizeUtil.getAxisBoth(124), paint);
paint.color = Colors.white;
canvas.drawCircle(circleCenter, SizeUtil.getAxisBoth(80), paint);
canvas.save();
canvas.restore();

4. Use the OpenPainter

CustomPaint(
painter: OpenPainter(),
)
Scaffold(
appBar: AppBar(
title: Text("First Canvas"),
),
body: Container(
child: Center(
child: Container(
width: 280,
height: 320.0,
child: CustomPaint(
painter: OpenPainter(),
),
),
)),
)
with logical size of width: 280,height: 320.0,
Container(
// width: 280,
// height: 320.0,
width: 200,
height: 400,
child: CustomPaint(
painter: OpenPainter(),
),
)
with logical size of width: 200,height: 400.0,
Scaffold(
// appBar: AppBar(
// title: Text("First Canvas"),
// ),
body: Container(
child: Container(
// width: 280,
// height: 320.0,
child: CustomPaint(
painter: OpenPainter(),
),
),
),
);
with the logical size of the device size

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store