Membuat Aplikasi Kamera dengan Flutter? Mudah Kok!

Assalamu’alaikum Warrohmatullahi Wabarokaatuh.

Helo guys, hari ini saya akan membagikan cara membuat aplikasi kamera sederhana dengan Flutter. Ada banyak cara untuk menggunakan kamera device dengan Flutter, tapi saya hanya akan membagikan cara menggunakan image picker.

Image Picker adalah sebuah plugin yang disediakan oleh Flutter untuk menangkap foto menggunakan kamera atau mengambil foto dari gallery. Karena Image Picker adalah sebuah plugin, maka pertama-tama kita harus menambahkan dulu plugin yang akan kita pakai di dependencies aplikasi kita.

Gimana caranya ?

Untuk yang android kita cukup menambahkan nama plugin nya yaitu image_picker di file pubspec.yml.

Khusus untuk iOS ada yang harus ditambahkan lagi di root/ios/Runner/Info.plist. Untuk lebih detailnya lagi silahkan di cek di dokumentasi resmi dari flutter.

 

Async dan Await

Nah, untuk tahap selanjutnya kita akan menggunakan async dan await. Async adalah sebuah function yang dipasangkan modifier async, cara penulisannya adalah:

Future asyncFunction() async {}

Seperti yang kita lihat pada contoh potongan program diatas, method async mengembalikan data dengan tipe Future. Tipe Future adalah tipe yang akan dieksekusi secara terjadwal. Future akan dieksekusi dan mengembalikan hasil yang sudah selesai setelah bagian body dieksekusi.

Await adalah sebuah fitur yang mengurangi kode boilerplate. Untuk yang belum tahu, boilerplate adalah bagian dari sebuah kode yang harus di include di berbagai tempat dengan atau tanpa perubahan sama sekali.

Await harus dituliskan didalam method async. Karena harus dituliskan dalam method async, maka perintah ini baru akan dijalankan setelah Future selesai dieksekusi, kemudian akan menghasilkan hasil dari Future.

Contoh cara menuliskan await:

Var imageFile = await ImagePicker.pickImage(source: ImageSource.camera);

Setelah itu kita set output dari future dengan menggunakan setState()

setState(() {

imagePath = imageFile;

});

Image Picker sendiri memiliki beberapa jenis media yang bisa diambil dari device, yaitu gallery, camera dan video.

Gallery akan membuka galeri dari device, kemudian kita bisa memilih foto yang akan kita ambil.

Camera akan membuat device membuka halaman kamera, fitur-fitur didalamnya kurang lebih sama seperti saat kita membuka kamera HP secara normal.

Ketiga fitur diatas menghasilkan output yang sama, yaitu sebuah data dengan tipe File, data ini kemudian dapat kita ambil dengan sintak image.file(path).

Nah, setelah kita membuka kamera dengan metode async, selanjutnya kita cek apakah imagePicker berhasil mendapatkan gambar yang kita inginkan atau tidak. Caranya adalah dengan menggunakan statement if else seperti dibawah:

If(imagePath != null){

                Image.file(imagePath);

} else {

                Text(“Foto tidak ada”);

}

Kode diatas akan memeriksa apakah file yang kita inginkan berhasil diambil atau tidak, jika gagal makan akan mengeluarkan sebuah text.

Nah, dibawah ini adalah versi lengkap dari kode-kode diatas.

// import packages yang diperlukan

Import ‘dart.io’;

Import ‘package:flutter/material.dart’;

Import ‘package:image_picker/image_picker.dart’;

 

// method main

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

 

// stateless widget MyApp

Class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context){

Return MaterialApp(

title: ‘Kamera Demo’,

home: KameraWidget,

);

}

}

// Stateful Widget

Class KameraWidget extends StatefulWidget{

@override

_KameraWidget createState() => _KameraWidgetState();

}

Class _KameraWidgetState extends State {

File imagePath;

Future captureImage(ImageSource imageSource) async {

Final imageFile = await ImagePicker.pickImage(source: imageSource);

setState(() {

imagePath = imageFile;

});

}

 

@override

Widget build(BuildContext context){

Return Scaffold(

appBar: AppBar(“Kamera”),

body: Column(

children: [

imagePath != null ? Image.file(imagePath):

Text(“Belum ada gambar”),

RaisedButton(

onPressed: () => captureImage(ImageSource.camera),

Child: Text(“AmbilFoto”),

),

]

),

);

}

}