Posts

Assalammualaikum warahmatullahi wabarakatu sobat Uda…

Artikel kali ini akan membahas gimana cara nya upload image dari camera atau galery device kita. Yuk, ikutin langkah berikut ini :

• Import library image_picker di pubspec.yaml. Kemudian klik package get.

• Pada class yang akan ditambahkan Upload Image, buat sebuah variable _image dan import library ‘dart.io’

• Buat Future untuk meng-get Image dari ImageSource

• Buat sebuah fungsi alert untuk menampilkan pilihan upload image

• Tambahkan fungsi diatas pada widget upload image seperti berikut

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Upload Image'),
    ),
    body: Center(
      child: Column(
        children: <Widget>[
          Padding(
            padding:
            const EdgeInsets.only(left: 16, top: 16, right: 16),
            child: _image == null
                ? GestureDetector(
              onTap: () {
                myAlert();
              },
              child: Container(
                height: 100,
                width: 100,
                child: CircleAvatar(
                  radius: 100,
                ),
              ),
            )
                : ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.file(
                _image,
                fit: BoxFit.cover,
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 5,
              ),
            ),
          ),
        ],
      ),
    ),
  );

• Maka akan muncul tampilan seperti berikut

Berikut soucecode lengkapnya :

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

void main() => runApp(MaterialApp(
  home: MenuUtama(),
  debugShowCheckedModeBanner: false,
));

class MenuUtama extends StatefulWidget {
  @override
  _MenuUtamaState createState() => _MenuUtamaState();
}

class _MenuUtamaState extends State<MenuUtama> {
  File _image;

  Future getImage(ImageSource media) async {
    var img = await ImagePicker.pickImage(source: media);
    setState(() {
      _image = img;
    });
  }

  void myAlert() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            title: Text('Please choose media to select'),
            content: Container(
              height: MediaQuery.of(context).size.height / 6,
              child: Column(
                children: <Widget>[
                  FlatButton(
                    onPressed: () {
                      Navigator.pop(context);
                      getImage(ImageSource.gallery);
                    },
                    child: Row(
                      children: <Widget>[
                        Icon(Icons.image),
                        Text('From Gallery'),
                      ],
                    ),
                  ),
                  FlatButton(
                    onPressed: () {
                      Navigator.pop(context);
                      getImage(ImageSource.camera);
                    },
                    child: Row(
                      children: <Widget>[
                        Icon(Icons.camera),
                        Text('From Camera'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Upload Image'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding:
              const EdgeInsets.only(left: 16, top: 16, right: 16),
              child: _image == null
                  ? GestureDetector(
                onTap: () {
                  myAlert();
                },
                child: Container(
                  height: 100,
                  width: 100,
                  child: CircleAvatar(
                    radius: 100,
                  ),
                ),
              )
                  : ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image.file(
                  _image,
                  fit: BoxFit.cover,
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height / 5,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}