Tutorial Flutter Menggunakan Firebase Cloud Storage

Tutorial Flutter Menggunakan Firebase Cloud Storage. Pemabahasan kali ini masih seputar firebase, kita akan mencoba menggunakan salah satu modul yang dimiliki firebase yaitu Firebase Cloud Storage. Kami sebelumnya sudah membahas juga soal Firebase Cloud Storage namun dalam versi website, berikut artikelnya https://tukangaplikasi.com/blog/tutorial-upload-file-ke-firebase-cloud-storage/.

Pertama yang harus dilakukan adalah mengaktifkan module-nya dengan cara

  1. Buka https://console.firebase.google.com/u/0/
  2. Pilih Projek Firebase anda
  3. Klik Storage di sebelah kiri
  4. Lalu klik next saja

Jika sudah di aktifkan kita akan memulai.

Tutorial Flutter Menggunakan Firebase Cloud Storage

Kita akan menggunakan file yang berasal dari artikel Registrasi dan Login Firebase Auth dengan BLoC. Tidak ada perubahan yang signifikan pada file yang ada, karena nanti kita akan mengupload pada halaman dashboard bukan saat pendaftaran.

Mengubah file model User.dart

File ini ada didalam folder model. Ubah file tersebut menjadi seperti ini

class User {
  final String id;
  final String fullName;
  final String email;
  final String phone;
  final String imageUrl;
  final String imageFileName;
  final int active;

  User(
      {this.id,
      this.fullName,
      this.email,
      this.phone,
      this.active,
      this.imageUrl,
      this.imageFileName});

  User.fromData(Map<String, dynamic> data)
      : id = data['id'],
        fullName = data['fullName'],
        email = data['email'],
        phone = data['phone'],
        active = data['active'],
        imageUrl = data['imageUrl'],
        imageFileName = data['imageFileName'];

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'fullName': fullName,
      'phone': phone,
      'email': email,
      'active': active,
      'imageFileName': imageFileName,
      'imageUrl': imageUrl
    };
  }
}

Kita menambahkan 2 parameter baru yaitu imageUrl dan imageFileName, ini akan membantu kita nantinya untuk mendapatkan nama file dan url file. Karena perubahan ini juga akan ada sedikit perbedaan struktur data yang kita simpan di firestore nanti.

Membuat Halaman Dashboard Flutter

Untuk sekarang halaman home_screen.dart masih apa adanya. Jadi kita akan mengubah tampilannya sedikit, kita akan menambahkan Drawer. Perama buatlah 2 folder dengan nama profile dan dashboard. Lalu salin kode dibawah ini ke dalam folder profil lalu simpan dengan nama profile.dart

import 'package:flutter/material.dart';

class Profile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Hallo, ini Profile"),);
  }
}

Kemudian kita akan lakukan hal yang sama untuk folder dashboard. Salin kode dibawah ini dan simpan dengan nama dashboard.dart

import 'package:flutter/cupertino.dart';

class Dashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Hallo, ini Dashboard"),);
  }
}

Berikut adalah drawer kita

Drawer(
        child: Container(
          constraints: new BoxConstraints.expand(
            width: MediaQuery.of(context).size.width - 20,
          ),
          color: Colors.white,
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(color: Colors.lightBlue),
                child: UserAccountsDrawerHeader(
                  decoration: BoxDecoration(color: Colors.lightBlue),
                  accountName: Text(widget.user.fullName),
                  accountEmail: Text(widget.user.email),
                  currentAccountPicture: CircleAvatar(
                    backgroundImage: NetworkImage(
                        (widget.user.imageUrl.length) > 0
                            ? widget.user.imageUrl
                            : 'https://via.placeholder.com/250'),
                  ),
                ),
              ),
              Expanded(
                child: ListView.builder(
                  padding: const EdgeInsets.only(top: 0.0),
                  itemCount: navigationItems.length,
                  itemBuilder: (context, counter) {
                    return Material(
                      color: Colors.white,
                      child: InkWell(
                        child: ListTile(
                          title: Text(navigationItems[counter].title),
                          leading: Icon(navigationItems[counter].icon),
                          onTap: () {
                            if (_scaffoldKey.currentState.isDrawerOpen) {
                              _scaffoldKey.currentState.openEndDrawer();
                            }
                            menuBloc.add(navigationItems[counter].menuEvent);
                          },
                        ),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        ),
      ),

Kita akan menggunakan BLoC dalam menghandle halaman mana yang akan dibuka. Buat Folder bernama menu_bloc, buat 4 file bloc.dart, menu_bloc.dart, menu_event.dart dan menu_state.dart.


Bloc.dart

export 'menu_bloc.dart';
export 'menu_event.dart';
export 'menu_state.dart';

menu_bloc.dart

import 'package:flutter_bloc/flutter_bloc.dart';

import 'menu_event.dart';
import 'menu_state.dart';

class MenuBloc extends Bloc<MenuEvent, MenuState> {
  @override
  MenuState get initialState => OpenDashboard();

  @override
  Stream<MenuState> mapEventToState(
    MenuEvent event,
  ) async* {

    yield Loading();
    if (event is DashboardClicked) {
      yield OpenDashboard();
    }
    if (event is ProfileClicked) {
      yield OpenProfile();
    }

  }
}

menu_event.dart

abstract class MenuEvent{
  @override
  List<Object> get props => [];
}

class LoadDefaultMenu extends MenuEvent {}

class DashboardClicked extends MenuEvent {}

class ProfileClicked extends MenuEvent {}

class LogoutClicked extends MenuEvent {}

menu_state.dart

import 'package:equatable/equatable.dart';

abstract class MenuState extends Equatable {
  const MenuState();

  @override
  List<Object> get props => [];
}

class Loading extends MenuState {}

class OpenDashboard extends MenuState {}

class OpenProfile extends MenuState {}

kemudian didalam folder model buatlah file bernama Menu.dart

class Menu {
  String title;
  IconData icon;
  MenuEvent menuEvent;

  Menu({this.title, this.icon, this.menuEvent});
}

Mari kita mulai untuk upload file ke firebase cloud storage. Berikut adalah profile.dart kita

class Profile extends StatefulWidget {
  User user;

  Profile({@required this.user});

  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                child: Container(
                  height: 150,
                  width: 150,
                  child: CircleAvatar(
                    backgroundImage: NetworkImage(
                        (widget.user.imageUrl.length) > 0
                            ? widget.user.imageUrl
                            : 'https://via.placeholder.com/250'),
                  ),
                ),
                onTap: (){

                },
              ),
            ],
          )
        ],
      ),
    );
  }
}

kita juga akan mengubah bagian home_screen.

if (state is OpenProfile) {
            return Profile(user: widget.user,);
          }

kita menambahkan parameter.

Kita akan menambahkan image_picker & tambahkan juga firebase_storage. Ikuti langkah-langkah instalasi nya ya. Selanjutnya adalah kita membuat sebuah fungsi, fungsi ini akan berfungsi untuk membuka galeri atau kamera

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

pada artikel ini saya menggunakan ImageSource.gallery, berarti nanti kita akan memilih gambar dari galeri. Setelah itu adalah proses upload nya, seperti ini

Future uploadFile() async {
    StorageReference storageReference = FirebaseStorage.instance
        .ref()
        .child('img/' + Path.basename(_image.path));
    StorageUploadTask uploadTask = storageReference.putFile(_image);
    await uploadTask.onComplete;
    final String Filename = await storageReference.getName();
    final String Filepath = await storageReference.getDownloadURL();

    User user = new User(
        id: widget.user.id,
        fullName: widget.user.fullName,
        phone: widget.user.phone,
        email: widget.user.email,
        active: 0,
        imageUrl: Filepath,
        imageFileName: Filename);

    await Firestore.instance
        .collection('users')
        .document(widget.user.id)
        .updateData(user.toJson());

    BlocProvider.of<AuthenticationBloc>(context).add(LoggedIn());
  }

Jika anda ingin menghapus data sebelumnya anda dapat menggunakan kode dibawah ini

FirebaseStorage.instance
       .ref()
       .child('img/'+widget.user.imageFileName).delete();

Sekian artikel Tutorial Flutter Menggunakan Firebase Cloud Storage, semoga bermanfaat.

Tinggalkan Balasan

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!

%d blogger menyukai ini: