Pada kesempatan kali ini penulis akan membahas Widget `CustomPaint` yang akan digunakan untuk membuat aplikasi menggambar. 

Langsung saja silahkan buat project baru pada Visual Studio Code dengan nama *appgambar*. Lalu buka file ``main.dart`` masukkan *source code* dibawah ini untuk memulai membuat tampilan awal.

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // Widget ini adalah akar dari aplikasi yang sedang dibuat.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Aplikasi menggambar',
      theme: ThemeData(
        primarySwatch: Colors.pink
      ),
      //pertama kali dipanggil kelas MyHomePage
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    //returnnya Scaffold yg masih kosong
    return Scaffold(
    );
  }
}

```

Setelah selesai mengetikkan source code diatas, silahkan Anda run aplikasinya untuk memastikan apakah sudah dapat berjalan. *Source code* tersebut masih standar dari template Flutter-nya itu sendiri, tampilannya pun masih berupa halaman kosong.

Kemudian silahkan Anda tambahkan *body*  dibawah ``return Scaffold`` ikuti seperti source code dibawah ini:

```dart
body: Container(
        child: CustomPaint(
          //painter yaitu kelas baru yang kita gunakan untuk kelas menggambar
          //painternya saya beri namaDraw
          painter: Gambar(),
          //child untuk CustomPaint nya Container
          child: Container(),
        ),
      ),
```

Langkah berikutnya Anda buat kelas baru untuk painternya yaitu class Gambar. Masukkan source code dibawah ini:

```dart
class Gambar extends CustomPainter{

}
```

Setelah itu silahkan Anda klik gambar seperti lampu di dalam class `Gambar`-nya, teman-teman akan membuat dua *missing override*.

![](https://i.imgur.com/A4GAscY.jpg)



Maka secara otomatis ketika Anda memilih *Create 2 missing override(s)*, *source code*-nya akan terlihat seperti dibawah ini:

```dart
//membuat kelas untuk painternya yaitu class Gambar
//create class Gambar yang sudah kita buat

class Gambar extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    // sesuatu yang akan anda gambarpada canvas
    // dengan container berupa canvas
    // jadi anda dapat menggambarnya pada canvas itu
    // apa yang akan digambar anda akan tuliskan di fungsi paint (void paint)
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    // kondisi ketika canvas di refresh / gambar
    // true/false
    return null;
  }

}
```

Jadi perlu diketahui bahwa untuk *CustomPainter* ini terdapat dua fungsi yaitu:

1. paint (penerapan paint itu sendiri)

   Sesuatu yang akan Anda gambar dengan menggunakan container berupa canvas. Anda dapat menggambarnya pada canvas itu sendiri, apa yang akan digambar akan dituliskan difungsi paint.

2. shouldRepaint (mengimplementasikan shouldRepaint)

   Kondisi ketika canvas mengalami perubahan atau di refresh, bisa dikatakan pada saat anda menggambar ulang atau menambahkan gambar pada canvas itu sendiri maka akan *souldRepaint*.

   

Selanjutnya penulis akan menjelaskan beberapa konsep dasar bagaimana Anda menggambar pada canvas itu sendiri,kali ini penulis akan coba membuat lingkaran. Silahkan ketikkan source code dibawah ini untuk paint nya itu sendiri :

```dart
@override
void paint(Canvas canvas, Size size) {
    
    //paint nya
    final paint = Paint();
    //warna yang akan Anda gunakan
    paint.color = Colors.blue;

    //variable baru
    //Offset = untuk nilai posisi x dan y
    //50 50 adalah posisi pusat lingkaran
    var c = Offset(50,50);

    //membuat lingkaran pada canvas
    //radius nya 50
    canvas.drawCircle(c, 50, paint);
  }
```

Seletah Anda selesai mengetikkan source code untuk membuat lingkaran di dalam fungsi paint, tampilan utama ketika di run akan terlihat seperti dibawah ini :

![](https://i.imgur.com/ZKQIMpR.jpg)

Jika Anda ingin merubah-ubah posisi gambar ke tengah silahkan ubah source code diatas menjadi seperti dibawah ini :

```dart
@override
  void paint(Canvas canvas, Size size) {
    
    //paint nya
    final paint = Paint();
    //warna yang akan Anda gunakan
    paint.color = Colors.blue;
    //height dan width bagi 2
    var c = Offset(size.width/2,size.height/2);

    canvas.drawCircle(c, 50, paint);
```

![](https://i.imgur.com/PGKVXz4.jpg)

Kemudian langkah berikutnya Anda coba untuk membuat kotak, tambahkan *source code* dibawah ini dengan membuat canvas baru.

```dart
    //untuk membuat kotak
    var rect=Rect.fromLTWH(size.width/3, size.height/4, 120, 150);
    paint.color = Colors.blueGrey;
    canvas.drawRect(rect, paint);
```

maka akan tampil gambar seperti dibawah ini:

![](https://i.imgur.com/BImxif1.jpg)

Setelah itu Anda coba membuat garis:

```dart
//untuk garis bagian atas
    paint.color=Colors.blue;
    //ketebalan garis
    paint.strokeWidth=15;
    //buat dua buah poin
    var p1=Offset(0,500);
    var p2=Offset(size.width/2, 100);
    //p1 = posisi awal
    //p2 = posisi akhir/kedua
    canvas.drawLine(p1, p2, paint);
```

![](https://i.imgur.com/0bGosHA.jpg)

Buat garis lagi untuk disebelah kiri dan kanan

```dart
//untuk garis samping kiri
    paint.color=Colors.blue;
    //ketebalan garis
    paint.strokeWidth=15;
    //buat dua buah poin
    var p22=Offset(size.width/2, 610);
    var p11=Offset(0,100);
    //p11 = posisi awal
    //p22 = posisi akhir/kedua
    canvas.drawLine(p11, p22, paint);
```

```dart
	//untuk garis samping kanan
    paint.color=Colors.blue;
    //ketebalan garis
    paint.strokeWidth=15;
    //buat dua buah poin
    var p222=Offset(size.width/2, 610);
    var p111=Offset(size.width, 100);
    canvas.drawLine(p111, p222, paint);

    //p111 = posisi awal
    //p222 = posisi akhir/kedua
    canvas.drawLine(p111, p222, paint);
```

Maka tampilannya akan terlihat seperti gambar dibawah ini:

![](https://i.imgur.com/muf60RB.jpg)

Konsep untuk membuat gambar pada flutter ini cukup mudah bukan. Anda juga dapat membuat gambar sesuai keinginan dengan menggunakan atribut seperti dibawah ini:

![](https://i.imgur.com/IR8n1oQ.jpg)



Setelah Anda memahami bagaimana cara membuat beberapa gambar pada flutter ini, penulis mulai memasuki langkah untuk membuat *Draw Aplication*.

Silahkan Anda kosongkan kembali pada class Gambar cukup ketikkan source code seperti gambar dibawah ini:

![](https://i.imgur.com/sRruU4B.png)



Silahkan Anda tambahkan source code dibawah ini didalam *class MyHomePage*:

```dart
class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //posisi awal
  Offset posisi = Offset(0, 0);
  // file baru untuk list berfungsi unntuk menyimpan posisi mouse Anda
  List<Offset> listPost = <Offset>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        //posisi kursor berada
        onPanUpdate: (DragUpdateDetails details) {
          //tempat melakukan tap
          setState(() {
            RenderBox box = context.findRenderObject();
            posisi = box.globalToLocal(details.globalPosition);

            //list post ini yang akan dikirim ke customPainter Anda
            listPost=List.from(listPost)..add(posisi);
          });
        },

        child: CustomPaint(
          //painter yaitu kelas baru yang kita gunakan untuk kelas menggambar
          //painternya saya beri namaDraw
          painter: Gambar(listPost),
          //child untuk CustomPaint nya Container
          child: Container(),
        ),
      ),
    );
  }
}

```

Selanjutnya silahkan Anda tambahkan source code pada *class Gambar* seperti dibawah ini:

```dart
//membuat kelas untuk painternya yaitu class Gambar
//create class Gambar yang sudah kita buat

class Gambar extends CustomPainter {
  //posisi kirim
  Gambar(this.listPost);
  final List<Offset> listPost;

  @override
  void paint(Canvas canvas, Size size) {
    //paint nya
    final paint = Paint();
    //warna yang akan Anda gunakan
    paint.color = Colors.blue;
    //create lingkaran
    // canvas.drawCircle(posisi, 20, paint);
    //looping
    for(var i=0;i<listPost.length;i++){
      canvas.drawCircle(listPost[i], 15, paint);

    }
  }

  @override
  bool shouldRepaint(Gambar oldDelegate) {
    // melakukan Repaint ketika posisi yg dikirim/dibuat berbeda dngan posisi awal
    return oldDelegate.listPost != listPost;
  }
}

```

Silahkan Anda coba melakukan drag mouse seperti pada video dibawah ini:

![](https://i.imgur.com/9tX4uz7.gif)

Selanjutnya Anda coba tambahkan source code dibawah ini untuk menambahkan tools nya yaitu untuk mengganti warna dan ukuran dari brush ketika Anda sedang mengambar.

Coba Anda scroll kebawah cari *GestureDetectore* kemudian lakukan seperti gambar dibawah ini:

![](https://i.imgur.com/MpUPbJX.jpg)

Ketika Anda mengklik *GestureDetectore* akan muncul seperti lampu, silahkan klik dan pilih *Wrap with Column*. Maka source code nya akan berubah seperti gambar dibawah ini:

![](https://i.imgur.com/jOKzOXP.png)

Pada line number ke 26 Anda enter dan tambahkan source code dibawah ini:

```dart
Container(
            color: Colors.blueGrey,
            child: Row(
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.brush, color: Colors.black,),
                  onPressed: ,
                )
                
              ],
            ),
          )
```



Selanjutnya buat variabel di dalam *class _MyHomePage* untuk menambahkan nilai default nya, tambahkan source code dibawah ini:

```dart
class _MyHomePageState extends State<MyHomePage> {
  //posisi awal
  Offset posisi = Offset(0, 0);
  // file baru untuk list berfungsi unntuk menyimpan posisi mouse Anda
  List<Offset> listPost = <Offset>[];
  //color disimpan ke dalam variabel listColor
  static Color color=Colors.brown;
  List<Color> listColor=<Color>[color];

```

Selanjutnya kembali lagi ke *Container* yang sudah Anda buat tadi dibagian *onPressed*, tambahkan source code dibawah ini:

```dart
                  onPressed: (){
                    setState((){
                      color=Colors.pink;
                    });
                  },
```

Setelah itu silahkan buat *listColor* dibawah *listPost* pada *GestureDetector* Widget yang sudah Anda buat.

```dart
//buat list color tambahkan warna sesuai dengan warna yang ada di setState pada container
//list color akan dikirimkan ke painter
listColor=List.from(listColor)..add(color);
```

Tambahkan listColor *painter* didalam *container*:

```dart
painter: Gambar(listPost, listColor),
```

Selanjutnya buat *constructor* pada *class Gambar* dan tambahkan *paint.color* seperti dibawah ini:

```dart
class Gambar extends CustomPainter {
  //posisi kirim
  Gambar(this.listPost, this.listColor);
  final List<Offset> listPost;
  final List<Color> listColor;

  @override
  void paint(Canvas canvas, Size size) {
    //paint nya
    final paint = Paint();
    //warna yang akan Anda gunakan
    paint.color = Colors.blue;
    //create lingkaran
    // canvas.drawCircle(posisi, 20, paint);
    //looping
    for(var i=0;i<listPost.length;i++){
      //ganti warna
      paint.color=listColor[i];
      //gambar lagi
      canvas.drawCircle(listPost[i], 20, paint);

    }
  }
```



Ketika di run tolls akan brush akan berada di atas, jika Anda ingin meletakkannya dibawah layar maka ubah fungsi *widget* menjadi *Expended*. Lakukan perintah seperti dibawah ini:

![](https://i.imgur.com/oXE1yrC.jpg)



Kemudian klik kanan pilih *format document*.

![](https://i.imgur.com/L1Yt6PR.jpg)



Selanjutnya run aplikasinya, Anda sudah dapat menggambar dan dapat mengganti warna dengan warna yang berbeda.

![](https://i.imgur.com/iPKlfNh.gif)



Kemudian Anda tambahkan beberapa icon lagi untuk mengubah ke beberapa warna. Tambahkan *IconBotton* lagi didalam *container* buatlah warna pada pengaturan brush yang berbeda. Tambahkan source seperti dibawah ini:

```dart
				IconButton(
                  //icon brush nya
                  icon: Icon(Icons.brush, color: Colors.green,),
                  
                  onPressed: (){
                    setState((){
                      //warna pada saat melukis
                      color=Colors.green;
                    });
                  },
                ),

                IconButton(
                  //icon brush nya
                  icon: Icon(Icons.brush, color: Colors.blue,),
                  
                  onPressed: (){
                    setState((){
                      //warna pada saat melukis
                      color=Colors.blue;
                    });
                  },
                ),
            
                //brush 2
                IconButton(
                  //icon brush nya
                  icon: Icon(Icons.fiber_manual_record, color: Colors.brown, size: 15,),
                  
                  onPressed: (){
                    setState((){
                      brushSize=15;
                    });
                  },
                ),

            //ukuran brush
                IconButton(
                  //icon brush nya
                  icon: Icon(Icons.fiber_manual_record, color: Colors.brown, size: 30,),
                  
                  onPressed: (){
                    setState((){
                      brushSize=30;
                    });
                  },
                ),

                //ukuran brush
                IconButton(
                  //icon brush nya
                  icon: Icon(Icons.remove_circle, color: Colors.white, size: 30,),
                  
                  onPressed: (){
                    setState((){
                      color=Colors.white;
                      
                    });
                  },
                ),
                
                 IconButton(
                  //icon brush nya
                  icon: Icon(Icons.refresh, color: Colors.white, size: 35,),
                  
                  onPressed: (){
                    setState((){
                      
                    });
                  },
                ),
```



Setelah itu tambahkan *listSize* didalam *child CustomPaint* agar size pada brush yang telah dibuat dapat dikirimkan ke dalam *painter*.

```dart
child: CustomPaint(
                //painter yaitu kelas baru yang kita gunakan untuk kelas menggambar
                //painternya saya beri namaDraw
    			//listSize yang baru ditambahkan
                painter: Gambar(listPost, listColor, listSize),
                //child untuk CustomPaint nya Container
                child: Container(),
              ),
```

Kemudian tambahkan juga source code pada *class Gambar*:

```dart
//posisi kirim
//this.listSize yang baru saja ditambahkan
  Gambar(this.listPost, this.listColor, this.listSize);
  final List<Offset> listPost;
  final List<Color> listColor;
//yang baru ditambahkan
  final List<double> listSize;
```

Langkah terakhir untuk fungsi refresh, ketika icon refresh ditekan maka layar akan refresh seperti tampilan awal. Tambahkan source code dibawah ini dibawah `IconBotton` refresh.

```dart
onPressed: () {
   setState(() {
     posisi = Offset(0, 0);
     listPost = <Offset>[];
     color = Colors.pink;
     listColor = <Color>[color];
     //brush
     brushSize = 20;
     listSize = <double>[brushSize];
     });
     },
```



*Nah..* untuk source code lengkapnya Anda bisa lihat pada gambar dibawah ini :

![](https://i.imgur.com/IFVSO3A.png)



*Demo Aplikasi :*

![](https://i.imgur.com/36s5TgQ.gif)



Selamat mencoba.

[Widget.CustomPaint](https://www.youtube.com/watch?v=-oqiU4Wc1fc&feature=youtu.be)

[flutter](https://api.flutter.dev/flutter/material/Icons-class.html)



Membuat Aplikasi Menggambar di Flutter

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Aplikasi Menggambar di Flutter

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Robouts, Kapal Robot Pintar Berteknologi IoT

Membuat Alarm Elektronik Menggunakan Arduino dengan Sensor Ultrasonik dan MP3 Module

Belajar Flutter Di Visual Studio Code : Membuat kelas DropdownButton

Mengakses Database SQLite dengan Flutter

Navigation dan Routes Pada Flutter

Membuat Aplikasi Menggambar di Flutter