Membuat Aplikasi Gallery dengan Firebase dan Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat aplikasi gallery dengan firebase dan flutter. Penasaran?, ayo ikuti pembahasannya berikut ini.

Firebase adalah salah salah satu layanan milik google yang menyediakan database, autentikasi dan storage. Kehadiran firebase sangat memudahkan pengembang untuk membuat aplikasi tanpa harus membuat aplikasi backend atau melakukan konfigurasi server.

Kali ini kita akan menggunakan fitur storage yang ada di firebase untuk menyimpan file gambar, dan menampilkannya pada aplikasi flutter. Scroll ke bagian paling bawah halaman ini untuk melihat hasil akhirnya.

Baca Artikel Lain ✨

📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more

📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more

📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more

Cara Membuat Aplikasi Gallery di Flutter

1. Buat dan koneksikan firebase dengan flutter. Silahkan ikuti tutorialnya di link berikut ini. https://www.sahretech.com/2023/10/cara-menghubungkan-flutter-dengan.html. Tutorial ini wajib kalian ikuti, karena kalian akan gagal pada tahap-tahap selanjutnya. Cara menghubungkan flutter dan firebase juga saya buat terpisah agar tutorial ini lebih ringkas dan langsung ke inti pembahasan.

2. Setelah flutter dan firebase kalian sudah terkoneksi, silahkan untuk masuk ke dashboard project firebase kalian, lalu buka menu build → pilih storage.

3. Kemudian klik get started → kemudian pilih start in test mode → kemudian klik next

4. Kemudian pilih cloud storage location ke asia-southeast2 → kemudian klik done → ok, tunggu sampai proses selesai.

5. Selanjutnya coba kalian upload beberapa file, klik tombol upload file → lalu pilih gambar yang ingin kalian upload.

6. Ok, sekarang buka project flutter kalian → lalu buka pubspec.yaml dan tambahkan beberapa library. Tambahkan firebase_core: ^2.23.0 dan cloud_firestore: ^4.4.5 dan image_picker: ^1.0.4 dan firebase_storage: ^11.5.3 ikuti seperti contoh di bawah ini.

7. Kemudian buka file main.dart. lalu edit dengan script di bawah ini.

// Mengimpor paket-paket yang diperlukan untuk Firebase dan Flutter
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

// Mengimpor file-file kustom untuk opsi Firebase dan halaman utama
import 'firebase_options.dart';
import 'home_page.dart';

// Fungsi utama, titik masuk aplikasi Flutter
void main() async {
  // Memastikan bahwa binding Flutter diinisialisasi
  WidgetsFlutterBinding.ensureInitialized();

  // Menginisialisasi Firebase dengan opsi default untuk platform saat ini
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  // Menjalankan aplikasi dengan membuat dan menjalankan widget MyApp
  runApp(MyApp());
}

// Kelas MyApp, StatelessWidget yang mewakili seluruh aplikasi
class MyApp extends StatelessWidget {
  // Metode build, mendefinisikan struktur UI aplikasi
  @override
  Widget build(BuildContext context) {
    // Mengembalikan widget MaterialApp, yang merupakan root aplikasi Flutter
    return MaterialApp(
      // Mengatur judul aplikasi
      title: 'Firebase CRUD',
      // Mendefinisikan tema aplikasi, menggunakan warna utama
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // Mengatur halaman utama aplikasi sebagai instance dari widget HomePage
      home: HomePage(),
    );
  }
}

8. kemudian buat file baru dengan nama home_page.dart di dalam folder lib. Ikuti script di bawah ini.

// Mengimpor paket Firebase Storage dan Flutter Material
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';

// Kelas HomePage yang merupakan StatefulWidget
class HomePage extends StatefulWidget {
  // Membuat dan mengembalikan instance dari _HomePageState
  @override
  _HomePageState createState() => _HomePageState();
}

// Kelas _HomePageState yang merupakan State dari HomePage
class _HomePageState extends State<HomePage> {
  // Instance dari FirebaseStorage untuk mengakses Firebase Storage
  final FirebaseStorage storage = FirebaseStorage.instance;
  
  // List untuk menyimpan URL gambar yang diambil dari Firebase Storage
  List<String> imageUrls = [];

  // Metode initState, dijalankan saat widget pertama kali dibuat
  @override
  void initState() {
    super.initState();
    // Memanggil metode getImages saat initState dipanggil
    getImages();
  }

  // Metode asynchronous untuk mengambil URL gambar dari Firebase Storage
  Future<void> getImages() async {
    try {
      // Mendapatkan referensi ke root storage
      final Reference ref = storage.ref();
      // Mendapatkan daftar item (gambar) dari storage
      final ListResult result = await ref.list();

      // Iterasi melalui setiap item dan mendapatkan URL download
      result.items.forEach((Reference ref) async {
        final String url = await ref.getDownloadURL();
        // Memperbarui state untuk menambahkan URL ke dalam list imageUrls
        setState(() {
          imageUrls.add(url);
        });
      });
    } catch (e) {
      // Menangani kesalahan saat mengambil gambar
      print('Error getting images: $e');
    }
  }

  // Metode build untuk merender tampilan halaman
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TES"),
      ),
      // Menggunakan GridView.builder untuk menampilkan gambar dalam grid
      body: GridView.builder(
        itemCount: imageUrls.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 1,
          mainAxisSpacing: 1,
          childAspectRatio: 0.85,
        ),
        // Membuat widget untuk setiap item dalam GridView
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            // Menampilkan gambar menggunakan Image.network
            child: Image.network(imageUrls[index]),
          );
        },
      ),
    );
  }
}

9. Sekarang semua sudah siap, jalankan emulator. Jika berhasil maka tampilannya akan tampil seperti gambar di bawah ini.

Sekian tutorial cara membuat aplikasi gallery dengan firebase dan flutter. Semoga tutorial singkat ini bermanfaat. Jika ada masalah silahkan tanyakan langsung di kolom komentar di bawah ini. Sekian dan terima kasih.