Tutorial membuat barcode reader dengan Flutter

Cak Momon
Assalamu'alaikum teman-teman.

Kali ini kita akan belajar pemrograman Android dengan menggunakan Flutter. Saya sebetulnya sudah lama menggunakan Java dan Android Studio dalam mendevelop aplikasi android, namun ada beberapa kendala yang saya hadapi seperti terpisahnya proses pengembangan User Interface (UI) dengan pengembangan Logic pemrogramannya. Dimana, UI dikembangkan dengan XML dan Logicnya dengan Java.

Nah, Flutter yang dikembangkan oleh Tim Google ini keluar dengan konsep Codebased programming. Dimana dalam Flutter, baik itu UI maupun Logicnya ditulis dalam bentuk skrip atau murni berbasis kode dengan menggunakan bahasa DART. Dengan kata lain, dalam Flutter tidak mengenal drap and drop.

Konsep belajar dan sharing tutorial ini saya buat agar kita sama-sama belajar learning by doing, kita ngoding bareng. 

Saya asumsikan teman-teman sudah meyiapkan sumber daya untuk memulai ngoding Flutter nya ya. Jadi disini saya tidak menuliskan terkait cara instalasinya.

Kita mulai dengan membuat project baru.

Saya menggunakan Visual Studio Code dan saya rekomendasikan juga untuk teman-teman

  • Pilih menu View - Command Palette ...
Command palette

  • cari Flutter: New Project
Flutter: New Project

  • Masukkan: Nama Project (misalkan 'barcode_reader')
Create projcet
  • tentukan tempat/folder penyimpanan 
  • tunggu Flutter menyiapkan berkas yang dibutuhkan

Selanjutnya, kita update dependencies di  pubspec.yaml nya. 

File pubspec.yaml ini mirip-mirip gradle di pengembangan android menggunakan android studio. Yang perlu diperhatikan dalam mengupdate file pubspec.yaml ini adalah tab indent nya, tidak boleh salah. 

File pubspec.yaml

di sini kita tambahkan dependencies: barcode_scan: ^2.0.1
Setelah itu kita SAVE, pada saat proses SAVE ini Flutter akan mendownload file yang diperlukan ke dalam project kita. Jadi pastika tidak ada pesan error

Selanjutnya kita masuk ke file main.dart.

Di dalam file main.dart sudah ada code prebuild dari Tim Flutter, jadi kita Select All dan hapus semua saja dan copy paste kode di bawah ini:


import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State {
  String barcode = "";

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Barcode Scanner Example'),
          ),
          body: new Center(
            child: new Column(
              children: [
                new Container(
                  child: new RaisedButton(
                      color: Colors.blue,
                      onPressed: scan,
                      child: new Text("Scan")),
                  padding: const EdgeInsets.all(8.0),
                ),
                new Text(barcode),
              ],
            ),
          )),
    );
  }

  Future scan() async {
    try {
      String barcode = await BarcodeScanner.scan();
      setState(() => this.barcode = barcode);
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          this.barcode = 'User tidak memberi akses ke kamera';
        });
      } else {
        setState(() => this.barcode = 'Unknown error: $e');
      }
    } on FormatException {
      setState(() => this.barcode = 'Tidak ada aktifitas scanning');
    } catch (e) {
      setState(() => this.barcode = 'Unknown error: $e');
    }
  }
}

Kode di atas sudah lengkap teman-teman, artinya sudah bisa kita RUN. Namun karena aplikasi yang kita kembangkan ini barcode reader, maka akan lebih mudah dipraktekkan jika kita RUN ke Device android beneran, bukan emulator.

Saya sudah coba menjalankan aplikasi ini di real device, dokumentasi dan step by step developmnetnya bisa teman-teman cek di link Youtube di bawah ini.


Tags
Reactions