Flutter Mobile Development · Pelajaran

CustomPainter dan Canvas

Pelajari penggambaran kustom menggunakan `CustomPainter` dan API `Canvas` untuk membuat bentuk, grafik, dan efek visual yang unik.

Pelajaran 1 dari 411 langkah

CustomPainter dan Canvas adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Intro to Custom Drawing

Flutter's widgets are powerful, but sometimes you need to draw something truly unique. Think custom graphs, unique shapes, or special visual effects!

This is where custom drawing comes in. It gives you pixel-level control over what appears on the screen, letting you create anything imaginable.

Meet CustomPainter

At the heart of custom drawing in Flutter is the CustomPainter class. You extend this class to define what and how to draw.

It provides a canvas to draw on.
It requires you to implement two key methods: paint and shouldRepaint.

The Canvas: Your Drawing Board

The paint method receives a Canvas object. Think of the Canvas as your blank drawing board, ready for your artistic commands.

It uses a 2D Cartesian coordinate system: the top-left corner is (0,0). X-values increase to the right, and Y-values increase downwards.

Styling with Paint

Before you draw, you need to tell Flutter how to draw. This is done using a Paint object. The Paint object defines properties like:

Color: What color should the drawing be?
StrokeWidth: How thick should lines be?
Style: Should it be filled (PaintingStyle.fill) or just an outline (PaintingStyle.stroke)?

Drawing Basic Shapes: Line

Let's draw our first shape: a simple line! We use canvas.drawLine(), providing start and end points (Offset) and our Paint style.

Try running this example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draw Line')),
        body: Center(
          child: CustomPaint(
            painter: LinePainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

class LinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 4.0
      ..style = PaintingStyle.stroke;

    final p1 = Offset(0, size.height / 2);
    final p2 = Offset(size.width, size.height / 2);

    canvas.drawLine(p1, p2, paint);
  }

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

Drawing Basic Shapes: Circle

Drawing a circle is just as easy with canvas.drawCircle(). You need a center point, a radius, and a Paint object.

Notice how we use size.width / 2 and size.height / 2 to center our drawings.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draw Circle')),
        body: Center(
          child: CustomPaint(
            painter: CirclePainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 5.0
      ..style = PaintingStyle.fill;

    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 4;

    canvas.drawCircle(center, radius, paint);
  }

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

Drawing Basic Shapes: Rectangle

To draw a rectangle, we use canvas.drawRect(). This method takes a Rect object, which defines the rectangle's position and size.

A Rect.fromLTWH constructor is useful for defining a rectangle from its left, top, width, and height.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draw Rectangle')),
        body: Center(
          child: CustomPaint(
            painter: RectanglePainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

class RectanglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.green
      ..strokeWidth = 3.0
      ..style = PaintingStyle.stroke;

    final rect = Rect.fromLTWH(size.width * 0.2, size.height * 0.2, size.width * 0.6, size.height * 0.6);

    canvas.drawRect(rect, paint);
  }

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

The shouldRepaint Method

The shouldRepaint method in CustomPainter is crucial for performance. It tells Flutter whether your custom painting needs to be redrawn.

Return true if the new delegate (the updated painter) has different data that would change the drawing.
Return false if the drawing would be identical. This prevents unnecessary repaints and saves CPU cycles.

For static drawings, false is often sufficient.

Drawing Complex Shapes with Path

For more complex or irregular shapes, you'll use a Path object. A Path allows you to define a series of connected lines and curves.

You can move to a point (moveTo), draw lines to points (lineTo), and finally close the path (close) before drawing it with canvas.drawPath().

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draw Triangle')),
        body: Center(
          child: CustomPaint(
            painter: TrianglePainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.purple
      ..style = PaintingStyle.fill;

    final path = Path();
    path.moveTo(size.width / 2, size.height * 0.1);
    path.lineTo(size.width * 0.9, size.height * 0.9);
    path.lineTo(size.width * 0.1, size.height * 0.9);
    path.close();

    canvas.drawPath(path, paint);
  }

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

Test Your Knowledge!

Which of the following statements about Flutter's custom drawing is TRUE?

Jawab di pelajaran interaktif

Recap: Custom Drawing Basics

You've taken your first steps into custom drawing in Flutter! You learned:

CustomPainter is your entry point for custom visuals.
The Canvas object is your drawing surface with a top-left origin.
The Paint object defines the style (color, stroke, fill).
How to draw basic shapes like lines, circles, and rectangles.
shouldRepaint helps optimize performance.
Path allows for drawing complex, custom shapes.

Keep experimenting to bring your unique designs to life!

Gratis untuk memulai

Belajar Dart dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “CustomPainter dan Canvas” gratis?

Ya — teks lengkap “CustomPainter dan Canvas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “CustomPainter dan Canvas”?

Pelajari penggambaran kustom menggunakan `CustomPainter` dan API `Canvas` untuk membuat bentuk, grafik, dan efek visual yang unik. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?

Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “CustomPainter dan Canvas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?

Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Flutter Mobile Development