Here in this post we collect some simple Flutter/Dart drawing examples.
Drawing a line
The first example shows how we can draw a line. The output of this example looks like this:
Here is the code for this examples:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
padding: const EdgeInsets.all(10),
children: <Widget>[
Container(
height: 720,
width: 20,
color: Colors.yellow,
child:CustomPaint(
child: Container(child: Text('This is a test drawing'),),
painter: LinePainter(),
)
)
]
)
)
);
}
}
class LinePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var center = size / 2;
var paint = Paint()..color = Colors.red;
canvas.drawLine(
Offset(50,400),
Offset(300,300),
paint,
);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}The example uses a CustomPaint widget, which uses the custom painter LinePainter, which is a simple painter class with the capability to draw a red line.
Drawing a line graph
This example shows how we can draw a line graph by passing an array of points data to a custom painter capable to draw a line graph.
Here is how the drawing in our example would look like:
Here is the code for this example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Offset> points = const [
Offset(10, 400),
Offset(50, 450),
Offset(100, 420),
Offset(150, 350),
Offset(200, 380),
Offset(250, 460),
Offset(300, 420),
Offset(350, 330)
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView(
padding: const EdgeInsets.all(10),
children: <Widget>[
Container(
height: 720,
width: 20,
color: Colors.yellow,
child:CustomPaint(
child: Container(child: Text('This is a test drawing'),),
painter: LineGraphPainter(this.points),
)
)
]
)
)
);
}
}
class LineGraphPainter extends CustomPainter {
final List<Offset> points;
LineGraphPainter(this.points);
@override
void paint(Canvas canvas, Size size) {
var center = size / 2;
var paint = Paint()..color = Colors.red;
for (int i = 0; i < points.length - 1; i++) {
Offset start = Offset(this.points[i].dx, this.points[i].dy);
Offset end = Offset(this.points[i + 1].dx, this.points[i + 1].dy);
canvas.drawLine(start, end, paint);
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}In this example, we use a CustomPaint widget, which calls and passes an array of point data to the custom painter LineGraphPainter, which is capable to draw a line graph.