Membuat Aplikasi Menggambar di Flutter

sheli indriani 29 Agustus 2019

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.

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:

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:

class Gambar extends CustomPainter{

}

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

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

//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:

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.
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 :

@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 :

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

@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);

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

    //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:

Setelah itu Anda coba membuat garis:

//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);

Buat garis lagi untuk disebelah kiri dan kanan

//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);

	//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:

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

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:

Silahkan Anda tambahkan source code dibawah ini didalam class MyHomePage:

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:

//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:

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:

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:

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

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:

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:

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

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

//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:

painter: Gambar(listPost, listColor),

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

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:

Kemudian klik kanan pilih format document.

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

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:

				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.

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:

//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.

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