MEMBUAT LAYOUT RESPONSIF DAN NAVIGASI APLIKASI

📱 Materi: Membuat Layout Responsif dan Navigasi Aplikasi

1. Pengantar

Dalam pengembangan aplikasi mobile (misalnya dengan Flutter), dua hal penting yang harus diperhatikan adalah:

1. Layout Responsif – tampilan aplikasi bisa menyesuaikan ukuran layar (smartphone, tablet, web).

2. Navigasi Aplikasi – cara pengguna berpindah dari satu halaman ke halaman lain.

---

2. Membuat Layout Responsif

a. Mengapa Responsif?

• Tidak semua pengguna memakai perangkat dengan ukuran layar yang sama.

• Aplikasi harus tetap nyaman dilihat, baik di layar kecil maupun besar.

• Responsif meningkatkan User Experience (UX).

b. Teknik Membuat Layout Responsif di Flutter

1. MediaQuery

   • Digunakan untuk mendapatkan ukuran layar.

   double width = MediaQuery.of(context).size.width;
   double height = MediaQuery.of(context).size.height;
   

   Contoh penggunaan:

   Container(
     width: MediaQuery.of(context).size.width * 0.8,
     height: 200,
     color: Colors.blue,
   )
   

2. LayoutBuilder

   • Menyesuaikan tampilan berdasarkan batasan ruang yang tersedia.

   LayoutBuilder(
     builder: (context, constraints) {
       if (constraints.maxWidth < 600) {
         return Text("Tampilan Mobile");
       } else {
         return Text("Tampilan Tablet/Web");
       }
     },
   )
   

3. Widget Fleksibel (Flexible & Expanded)

   • Untuk membuat layout yang bisa menyesuaikan ruang.

   Row(
     children: [
       Expanded(child: Container(color: Colors.red)),
       Expanded(child: Container(color: Colors.green)),
     ],
   )
   

4. Responsive Package (opsional)

   • Gunakan package seperti flutter_screenutil agar ukuran otomatis menyesuaikan layar.

---

3. Navigasi Aplikasi

a. Navigasi Sederhana

Flutter menyediakan fungsi bawaan untuk berpindah antar halaman:

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

Kembali ke halaman sebelumnya:

Navigator.pop(context);

b. Named Routes

Lebih rapi untuk aplikasi besar:

// main.dart
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/about': (context) => AboutPage(),
  },
);

// navigasi
Navigator.pushNamed(context, '/about');

c. Bottom Navigation Bar

Digunakan untuk navigasi cepat di bagian bawah layar.

Scaffold(
  body: _pages[_selectedIndex],
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _selectedIndex,
    onTap: (index) {
      setState(() {
        _selectedIndex = index;
      });
    },
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Settings"),
    ],
  ),
)

d. Drawer Menu

Navigasi dengan menu samping.

Scaffold(
  appBar: AppBar(title: Text("Aplikasi")),
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(child: Text("Menu")),
        ListTile(
          title: Text("Home"),
          onTap: () => Navigator.pushNamed(context, '/'),
        ),
        ListTile(
          title: Text("About"),
          onTap: () => Navigator.pushNamed(context, '/about'),
        ),
      ],
    ),
  ),
)

---

4. Best Practice

• Gunakan LayoutBuilder untuk membedakan tampilan mobile vs tablet.

• Jangan hardcode ukuran (misalnya width: 300), lebih baik gunakan persentase layar.

• Gunakan state management (Provider, Riverpod, GetX) untuk navigasi kompleks.

• Buat navigasi yang konsisten dan mudah dipahami pengguna.

---

5. Kesimpulan

• Layout responsif memastikan aplikasi nyaman digunakan di berbagai ukuran layar.

• Navigasi aplikasi membuat pengguna lebih mudah berpindah halaman.

• Kombinasi keduanya = aplikasi lebih profesional, nyaman, dan scalable.

---

Link Exsperimen Aplikasi : https://z36y064j36z0.zapp.page/#/