Home Android How to Access Camera in Flutter

How to Access Camera in Flutter

0
How to Access Camera in Flutter

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.

image_picker setelah ditambahkan dari pub.dev

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 :

Tampilan Utama setelah running

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.

Open Camera Emulator Android Studio

Kemudian ambil camera tersebut untuk mendapatkan gambar kemudian klik tanda ceklis dibawahnya.

Tadaa! Hasil ambil gambar sudah masuk kedalam gallery device masing-masing.

Gambar didalam gallery

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';