Image Load

Hello world,

Melanjutkan pembahasan mengenai form sebelumnya yang sudah terlalu lama belum ada kelanjutannya kali ini saya membuat artikel mengenai bagaimana mengambil atau menambahkan gambar dari handphone ke aplikasi kita menggunakan image picker. Kita bisa mengambil gambar dari galeri ataupun dari kamera. Fungsinya biasanya ketika kita membuat sebuah form yang berisi inputan data yang mengharuskan pengguna mengupload foto untuk kelengkapan data.

Oke langsung saja seperti biasa kita mulai dari membuat halaman dasarnya seperti berikut.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatefulWidget {
@override
_MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Picker'),
),
body: Center(
child: Text('Hello'),
),
);
}
}


Kemudian kita tambahkan package image_picker pada aplikasi kita yaitu pada pubspec.yaml dan kita import ke dalam halaman utama di atas.

dependencies:
  image_picker: ^0.6.6+4
import 'dart:io';
import 'package:image_picker/image_picker.dart';

Selain image_picker kita perlu menambahkan juga dart:io untuk bisa menggunakan data File. Selanjutnya kita buat fungsi untuk mengambil gambarnya seperti berikut.

Mengambil gambar dari galeri

  File _image;

Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);

setState(() {
_image = image;
});
}

Pada contoh di atas kita buat sebuah variable berupa File dengan nama _image yang akan menampung file gambar yang telah didapatkan dari galeri. Dari sini kita sudah bisa menggunakan fungsi tersebut pada halaman kita dengan membuat tombol untuk memanggil fungsi di atas. Contoh full codenya kira-kira seperti berikut.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatefulWidget {
@override
_MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {
File _image;

Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);

setState(() {
_image = image;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Picker Example'),
),
body: Center(
child: _image == null ? Text('No image selected.') : Image.file(_image),
),
floatingActionButton: FloatingActionButton(
onPressed: getImage,
tooltip: 'Pick Image',
child: Icon(Icons.add_a_photo),
),
);
}
}


Mengambil gambar dari kamera.

Lalu bagaimana jika kita ingin mengambil gambar dari kamera? Caranya kita tinggal mengganti ImageSource menjadi camera. contohnya seperti berikut.

var image = await ImagePicker.pickImage(source: ImageSource.camera);


Untuk tambahannya untuk penggunaan pada IOS kita harus mengambahkan konfigurasi pada ios/Runner/Info.plist seperti bertikut

<key>NSPhotoLibraryUsageDescription</key>
<string>Need to upload image</string>
<key>NSCameraUsageDescription</key>
<string>Need to upload image</string>


Selamat mencoba :)