Cara Membuat Aplikasi Flutter Mirip Pinterest dengan Fitur Favorit dan Dark Mode

Flutter adalah framework yang sangat fleksibel untuk membuat aplikasi mobile dengan tampilan menarik dan modern. Pada artikel kali ini, saya akan membagikan pengalaman membuat aplikasi sederhana yang mirip dengan Pinterest, khususnya untuk menampilkan foto-foto pemandangan dalam bentuk grid yang estetik.

Fitur Utama Aplikasi

Aplikasi ini dilengkapi dengan beberapa fitur penting agar lebih interaktif dan nyaman digunakan:

1. Layout Responsif – Tampilan grid menyesuaikan orientasi (portrait atau landscape).

2. Navigasi Modern – Menggunakan BottomNavigationBar untuk berpindah antara halaman Home dan Favorit.

3. Masonry Grid (Pinterest Style) – Foto ditampilkan seperti Pinterest dengan ukuran berbeda-beda.

4. Love/Favorit Foto – Pengguna bisa menekan tombol hati untuk menyimpan foto ke daftar Favorit.

5. Mode Gelap & Terang – Tersedia tombol untuk mengganti tema dark mode dan light mode.

6. Detail Foto – Foto bisa diperbesar dan dilihat lebih detail dengan animasi.

Struktur Proyek

Berikut file penting yang digunakan dalam aplikasi:

• pubspec.yaml → untuk mengatur dependency (pakai flutter_staggered_grid_view).

• lib/main.dart → kode utama aplikasi Flutter.

• assets/images/ → folder gambar pemandangan yang ditampilkan di aplikasi.

Kode Lengkap

Berikut adalah contoh kode main.dart:

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
  runApp(const PinterestApp());
}

class PinterestApp extends StatefulWidget {
  const PinterestApp({super.key});

  @override
  State<PinterestApp> createState() => _PinterestAppState();
}

class _PinterestAppState extends State<PinterestApp> {
  bool isDarkMode = false;
  int selectedIndex = 0;
  final Set<String> favoriteImages = {};

  final List<String> images = List.generate(
    20,
    (index) =>
        "https://source.unsplash.com/random/500x700/?nature,landscape&sig=$index",
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Pinterest Clone",
      debugShowCheckedModeBanner: false,
      theme: isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Pinterest Pemandangan"),
          actions: [
            IconButton(
              icon: Icon(isDarkMode ? Icons.dark_mode : Icons.light_mode),
              onPressed: () {
                setState(() {
                  isDarkMode = !isDarkMode;
                });
              },
            ),
          ],
        ),
        body: selectedIndex == 0 ? buildHome() : buildFavorites(),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: selectedIndex,
          onTap: (index) => setState(() => selectedIndex = index),
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "Beranda"),
            BottomNavigationBarItem(icon: Icon(Icons.favorite), label: "Favorit"),
          ],
        ),
      ),
    );
  }

  Widget buildHome() {
    return OrientationBuilder(
      builder: (context, orientation) {
        return MasonryGridView.count(
          crossAxisCount: orientation == Orientation.portrait ? 2 : 4,
          itemCount: images.length,
          itemBuilder: (context, index) {
            final img = images[index];
            final isFav = favoriteImages.contains(img);
            return Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16),
              ),
              clipBehavior: Clip.hardEdge,
              child: Stack(
                children: [
                  InkWell(
                    onTap: () => Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => DetailPage(imageUrl: img),
                      ),
                    ),
                    child: Image.network(
                      img,
                      fit: BoxFit.cover,
                      errorBuilder: (_, __, ___) => Container(
                        color: Colors.grey[300],
                        child: const Icon(Icons.broken_image),
                      ),
                    ),
                  ),
                  Positioned(
                    right: 8,
                    top: 8,
                    child: IconButton(
                      icon: Icon(
                        isFav ? Icons.favorite : Icons.favorite_border,
                        color: isFav ? Colors.red : Colors.white,
                      ),
                      onPressed: () {
                        setState(() {
                          if (isFav) {
                            favoriteImages.remove(img);
                          } else {
                            favoriteImages.add(img);
                          }
                        });
                      },
                    ),
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }

  Widget buildFavorites() {
    if (favoriteImages.isEmpty) {
      return const Center(child: Text("Belum ada foto yang disukai"));
    }
    return GridView.count(
      crossAxisCount: 2,
      children: favoriteImages.map((img) {
        return Image.network(img, fit: BoxFit.cover);
      }).toList(),
    );
  }
}

class DetailPage extends StatelessWidget {
  final String imageUrl;
  const DetailPage({super.key, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: InteractiveViewer(
          child: Image.network(imageUrl),
        ),
      ),
    );
  }
}

Cara Menjalankan Aplikasi

1. Pastikan Flutter sudah terinstal.

2. Tambahkan dependency di pubspec.yaml:

   dependencies:
     flutter:
       sdk: flutter
     flutter_staggered_grid_view: ^0.7.0
   

3. Simpan kode main.dart ke dalam folder lib.

4. Jalankan dengan perintah:

   flutter run
   

Hasil Akhir

• Halaman utama menampilkan grid foto seperti Pinterest.

• Foto bisa di-love lalu muncul di daftar Favorit.

• Tampilan otomatis berubah jika device di-rotate (portrait ↔ landscape).

• Ada mode dark dan light yang bisa diubah kapan saja.

---

Kesimpulan

Dengan Flutter, kita bisa dengan mudah membuat aplikasi sederhana mirip Pinterest dengan tampilan modern. Fitur favorit, dark mode, dan layout responsif menjadikan aplikasi lebih interaktif dan nyaman digunakan.

Kalau kamu ingin mengembangkan lebih lanjut, kamu bisa menambahkan login user, upload foto, atau integrasi dengan API Unsplash untuk mendapatkan gambar yang lebih variatif.

Berikut hasil dari project saya:

https://z51yu06gv61yv.zapp.page/#/