Membuat Aplikasi Flutter dengan Layout Responsif, Navigasi, dan Dynamic Theme

Flutter adalah framework UI yang sangat powerful untuk membuat aplikasi mobile yang cantik dan responsif. Pada tutorial kali ini, kita akan belajar membuat aplikasi dengan fitur-fitur berikut:

• Layout Responsif yang menyesuaikan tampilan berdasarkan ukuran layar.

• Navigasi antar halaman menggunakan BottomNavigationBar dan Navigator.

• Stateful Widget dengan mekanisme setState untuk update UI.

• Dynamic Theme yang memungkinkan pengguna toggle antara tema terang dan gelap.

• Penggunaan widget Column, Row, Flexible, dan Expanded untuk tata letak yang rapi.

• Contoh halaman Home, Favorite, dan Profile lengkap dengan toggle favorit dan foto profil.

---

Struktur Aplikasi

1. MainApp: Stateful widget yang mengatur tema aplikasi dan halaman utama.

2. MainPage: Scaffold dengan AppBar, BottomNavigationBar, dan body yang berubah sesuai tab yang dipilih.

3. HomePage: Menampilkan daftar item dengan layout responsif, menyesuaikan tampilan antara ListView (layar kecil) dan Row (layar lebar).

4. FavoritePage: Daftar item dengan fitur toggle favorit.

5. ProfilePage: Halaman profil sederhana dengan foto dan tombol navigasi ke halaman detail profil.

6. DetailPage: Halaman detail untuk menampilkan informasi lengkap sebuah item.

---

Poin Penting Kode

1. Dynamic Theme dengan StatefulWidget

bool isDarkTheme = false;

void toggleTheme() {
  setState(() {
    isDarkTheme = !isDarkTheme;
  });
}

Pengguna dapat beralih tema terang dan gelap dengan menekan ikon di AppBar.

---

2. Navigasi dengan BottomNavigationBar

BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: _onTap,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Favorites'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
  ],
),

Navigasi antar halaman Home, Favorite, dan Profile dapat dilakukan dengan mudah.

---

3. Layout Responsif dengan LayoutBuilder

LayoutBuilder(
  builder: (context, constraints) {
    bool isWide = constraints.maxWidth > 600;
    if (isWide) {
      // Layout dengan Row dan Expanded untuk layar lebar
    } else {
      // Layout ListView untuk layar kecil
    }
  },
);

Dengan ini, aplikasi bisa menyesuaikan tampilannya pada berbagai ukuran layar, baik smartphone maupun tablet.

---

4. Stateful Widget untuk Toggle Favorit

IconButton(
  icon: Icon(item['isFavorite'] ? Icons.favorite : Icons.favorite_border),
  onPressed: () {
    setState(() {
      items[index]['isFavorite'] = !items[index]['isFavorite'];
    });
  },
)

Pengguna dapat menandai item favorit secara interaktif.

---

5. Navigasi Antar Halaman Detail

Menggunakan Navigator.push untuk pindah ke halaman detail ketika item di klik.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => DetailPage(...),
  ),
);

---

Kesimpulan

Dengan Flutter, membuat aplikasi dengan UI yang responsif dan fitur navigasi yang lengkap menjadi lebih mudah. Kamu bisa menambahkan fitur lainnya seperti animasi, pengelolaan state yang lebih kompleks, atau koneksi ke backend sesuai kebutuhan.

Kode yang saya bagikan sudah lengkap dengan:

• Toggle tema terang-gelap.

• Navigasi antar halaman.

• Layout responsif.

• Daftar favorit yang dapat di-toggle.

• Foto profil dengan navigasi detail profil.
  
  

https://z816e062n816f.zapp.page/#/