tampilan scrennshot fitra anzani
https://zu1p606uuu1p7.zapp.page/#/
main() dan FlutterGram
main() adalah titik awal aplikasi, menjalankan runApp() untuk memulai Flutter.FlutterGram adalah widget utama (StatelessWidget) yang membungkus seluruh aplikasi dengan MaterialApp.
MaterialApp berfungsi mengatur tema, judul aplikasi, dan halaman awal (home: HomePage()).
HomePageHomePage adalah tampilan utama feed Instagram.Menggunakan Scaffold untuk struktur dasar: AppBar, body, dan BottomNavigationBar.AppBar menampilkan judul aplikasi dan ikon (like, send).ListView membuat daftar posting bisa di-scroll vertikal.BottomNavigationBar meniru menu navigasi Instagram (Home, Search, Add, Likes, Profile).PostWidgetWidget khusus untuk menampilkan satu posting: username, foto, jumlah like/komentar, caption.Image.asset(imagePath) menampilkan gambar dari folder assets/.CircleAvatar menampilkan foto profil dari assets.Row dengan ikon (like, comment, send) meniru tombol interaksi di Instagram.Padding dan Divider digunakan untuk jarak antar elemen agar layout rapi.
Fungsi umum kode
Membuat feed Instagram sederhana menggunakan Flutter.Semua gambar diambil dari file lokal (assets/), sehingga bisa tampil tanpa koneksi internet.Struktur modular: setiap posting dibuat dengan PostWidget agar mudah ditambahkan posting baru.
Siap! Aku buatkan **contoh postingan blog** yang rapi dan siap langsung kamu pakai. Aku sertakan **screenshot placeholder**, kode, dan penjelasan singkat supaya lengkap sesuai tugas.
---
# 📸 Review Aplikasi FlutterGram (Instagram Sederhana)
Halo semua! 👋
Hari ini saya membuat review aplikasi Flutter sederhana yang meniru tampilan **Instagram**. Aplikasi ini saya beri nama **FlutterGram**.
---
## 1️⃣ Tampilan Aplikasi
Berikut tampilan **feed** FlutterGram:

> **Catatan:** Gambar di atas hanya contoh. Screenshot asli bisa kamu ambil dari emulator atau HP.
Tampilan aplikasi memiliki:
* AppBar dengan judul 📸 Instagram dan ikon like & send
* Feed scrollable dengan postingan: username, foto, jumlah like & komentar, caption
* Bottom navigation bar seperti Instagram asli (Home, Search, Add, Likes, Profile)
## 2️⃣ Potongan Kode Program
Berikut contoh kode untuk menampilkan satu postingan di feed:
```dart
PostWidget(
username: '@anjaniii',
imagePath: 'assets/anjani.jpeg',
likes: 1297,
comments: 45,
caption: 'Masyaallahh 💖',
); Kode lengkapnya ada di `lib/main.dart`, menggunakan `Image.asset` untuk menampilkan foto dari folder `assets/`.
## 3️⃣ Penjelasan Singkat Cara Kerja Kode
* **MaterialApp & Scaffold** → Membuat struktur utama aplikasi
* **AppBar** → Menampilkan judul dan ikon interaksi
* **ListView** → Menyusun feed agar bisa scroll
* **PostWidget** → Widget khusus untuk setiap postingan: foto, username, like, komentar, caption
* **Image.asset()** → Menampilkan gambar dari folder lokal (`assets/`)
* **BottomNavigationBar** → Menu navigasi bawah seperti Instagram
---## 4️⃣ Kesimpulan
Aplikasi **FlutterGram** ini meniru layout Instagram secara sederhana.
* Gambar menggunakan **file lokal**, jadi tidak membutuhkan internet.
* Cocok untuk belajar **widget Flutter, layout, dan scrollable view**.
* Mudah dikembangkan, misal menambah postingan, foto profil berbeda, atau interaksi tom

Comments
Post a Comment