Hai, sobat Flutter! Pada artikel kali ini, saya akan berbagi kepada teman teman semua mengenai “How to Access Camera in Flutter”. Sebelumnya udah pernah tau belum Flutter itu apa sih?
Singkatnya, Flutter merupakan sebuah platform ciptaan Google yang menyediakan framework serta bersifat open source. Flutter adalah suatu UI(User Interface) SDK(Software Development Kit) yang digunakan oleh banyak developer untuk membangun aplikasi di OS (Operation System) Android dan IOS serta juga Website app. Untuk membuat satu tampilan desain dibutuhkan satu bahasa dart. Dart juga diartikan sebagai UI (User Interface) + Logika Komputer.
Langkah pertama yang harus dilakukan ialah menambahkan dependecies “image_picker” pada pubspec.yaml yang bisa kita dapatkan dari https://pub.dev/.
dependencies:
image_picker: ^0.8.3+2
Dengan dependecies, kita bisa mengambil gambar dengan menggunakan kamera maupun mengaksesnya menggunakan gallery.
Kemudian kita menuju main.dart. Sebelumnya jangan lupa ya terlebih dahulu untuk melakukan import material.dart kedalam file aplikasi masing-masing.
import 'package:flutter/material.dart';
Kemudian baru setelahnya kita membuat sebuah class stateful pada main.dart seperti berikut :
class AccessCameraPage extends StatefulWidget {
@override
_AccessCameraPageState createState() => _AccessCameraPageState();
}
class _AccessCameraPageState extends State<AccessCameraPage> {
File? _image;
//digunakan untuk menampung image
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Access Camera"),
),
body: Container(
child: Center(
child: _image == null ? Text("No Image") : Image.file(_image!),
),
),
// memulai floating button
);
}
Selanjutnya kita membuat button untuk menggunakan camera :
floatingActionButton: FloatingActionButton(
child: Icon(
Icons.add_a_photo,
color: Colors.white,
),
backgroundColor: Colors.green,
onPressed: () {
openCamera();
}),
Barulah kita membuat fuction untuk memanggil openCamera(); , lalu set State _image berikut lengkapnya :
class _AccessCameraPageState extends State<AccessCameraPage> {
File? _image;
Future<void> openCamera() async { //fuction openCamera();
final pickedImage =
await ImagePicker().getImage(source: ImageSource.camera);
setState(() { // tempat untuk set state image
_image = File(pickedImage!.path);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Access Camera"),
),
body: Container(
child: Center(
child: _image == null ? Text("No Image") : Image.file(_image!),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(
Icons.add_a_photo,
color: Colors.white,
),
backgroundColor: Colors.green,
onPressed: () {
openCamera();
}),
);
}
}
Lalu kita membutuhkan sebuah permission, ini bisa kita temukan lagi pada https://pub.dev/. dibagian Readme.
Jika menggunakan IOS kita membutuhkan :
NSPhotoLibraryUsageDescription //jika membutuhkan photo library
NSCameraUsageDescription //jika mebutuhkan camera
NSMicrophoneUsageDescription //jika membutuhkan microphone
Dan jika menggunakan Android :
dimulai dengan versi 0.8.1 dukungan implementasi Android untuk memilih (beberapa) gambar di Android 4.3 atau lebih tinggi. Tidak ada konfigurasi yang diperlukan - plugin harus bekerja di luar kotak. Tidak perlu lagi menambahkan android:requestLegacyExternalStorage="true" sebagai atribut ke tag <application> di AndroidManifest.xml, karena image_picker telah diperbarui untuk menggunakan penyimpanan terbatas.
Berikut adalah hasil running project untuk mengakses camera menggunakan flutter :
Pada floating action button, click button yang ada camera tersebut. Disini saya hanya menggunakan emulator bawaan Android Studio, maka dari itu gambar yang saya ambil hanya yang disediakan oleh emulator tersebut.
Tapi teman-teman semua bisa menyambungkannya dengan Real Device masing-masing.
Kemudian ambil camera tersebut untuk mendapatkan gambar kemudian klik tanda ceklis dibawahnya.
Tadaa! Hasil ambil gambar sudah masuk kedalam gallery device masing-masing.
Tidak sulit bukan? Selamat mencoba sobat Flutter 🙂
Import yang dibutuhkan pada main.dart:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';