UDACODING

Posts

Cara Upload Image di Flutter

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.
image-21 Cara Upload Image di Flutter
  • Pada class yang akan ditambahkan Upload Image, buat sebuah variable _image dan import library ‘dart.io’
image-22 Cara Upload Image di Flutter
  • Buat Future untuk meng-get Image dari ImageSource
image-23 Cara Upload Image di Flutter
  • Buat sebuah fungsi alert untuk menampilkan pilihan upload image
image-24 Cara Upload Image di Flutter
  • 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
image-25 Cara Upload Image di Flutter
image-26 Cara Upload Image di Flutter

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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Leave a Reply :

* Your email address will not be published.