Membangun tampilan aplikasi yang menarik dan navigasi yang rapi adalah kunci dalam pengembangan mobile modern. Dengan menggunakan Flutter, developer dapat membuat UI fleksibel sekaligus menerapkan sistem navigasi yang clean dan scalable untuk Android maupun iOS.

Artikel ini membahas cara membuat UI aplikasi dengan Flutter serta menerapkan navigasi modern yang sesuai standar aplikasi masa kini.

Mengapa Flutter Cocok untuk Membangun UI?

Flutter menggunakan pendekatan declarative UI berbasis widget. Artinya, hampir semua elemen visual adalah widget yang dapat dikombinasikan dan disusun secara hierarkis.

Keunggulan Flutter untuk desain UI:

Custom UI tanpa batasan bawaan sistem
Konsisten di berbagai platform
Hot reload untuk mempercepat desain
Dukungan Material Design dan Cupertino

Dengan Flutter, kamu bisa membangun UI login, dashboard, e-commerce, hingga aplikasi sosial dengan tampilan profesional.

1. Struktur Dasar UI di Flutter

Setiap aplikasi Flutter biasanya dimulai dari MaterialApp dan Scaffold.

Contoh struktur dasar:

import ‘package:flutter/material.dart’;

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“Dashboard”),
),
body: Center(
child: Text(“Halo Flutter!”),
),
);
}
}

Penjelasan singkat:

MaterialApp → Root aplikasi
Scaffold → Struktur layout dasar (AppBar, Body, FloatingActionButton)
AppBar → Header aplikasi
Body → Konten utama

Struktur ini menjadi fondasi dalam pembuatan UI aplikasi Flutter.

2. Membuat Layout UI Modern

Beberapa widget layout penting untuk membuat UI modern:

Column → Susunan vertikal
Row → Susunan horizontal
Stack → Elemen bertumpuk
Container → Styling (warna, padding, border)
Expanded → Mengatur pembagian ruang

Contoh UI sederhana halaman login:

Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

TextField(

decoration: InputDecoration(labelText: “Email”),

),

TextField(

decoration: InputDecoration(labelText: “Password”),

obscureText: true,

),

SizedBox(height: 20),

ElevatedButton(

onPressed: () {},

child: Text(“Login”),

),

],

)

Dengan kombinasi widget tersebut, kamu sudah bisa membangun halaman autentikasi sederhana.

3. Styling UI agar Lebih Profesional

Untuk membuat UI terlihat modern:

Gunakan padding dan margin yang konsisten.
Gunakan warna yang sesuai branding.
Manfaatkan ThemeData untuk global styling.
Gunakan Card dan ListTile untuk tampilan list modern.

Contoh penggunaan ThemeData:

MaterialApp(

theme: ThemeData(

primarySwatch: Colors.blue,

fontFamily: ‘Poppins’,

),

)

Penggunaan tema membantu menjaga konsistensi desain di seluruh aplikasi.

4. Navigasi Dasar di Flutter

Navigasi adalah proses berpindah antar halaman.

Flutter menyediakan sistem navigasi menggunakan Navigator.

Contoh navigasi ke halaman baru:

Navigator.push(

context,

MaterialPageRoute(builder: (context) => DetailPage()),

);

Untuk kembali ke halaman sebelumnya:

Navigator.pop(context);

Navigasi ini cocok untuk aplikasi sederhana.

5. Navigasi Modern dengan Named Route

Untuk aplikasi yang lebih besar, gunakan named route agar lebih terstruktur.

Contoh konfigurasi:

MaterialApp(

initialRoute: ‘/’,

routes: {

‘/’: (context) => HomePage(),

‘/detail’: (context) => DetailPage(),

},

);

Navigasi menggunakan:

Navigator.pushNamed(context, ‘/detail’);

Keuntungan named route:

Struktur navigasi lebih rapi
Mudah dikelola
Cocok untuk aplikasi skala menengah hingga besar

6. Bottom Navigation Bar untuk Aplikasi Modern

Banyak aplikasi modern menggunakan BottomNavigationBar seperti:

Aplikasi e-commerce
Media sosial
Aplikasi berita

Contoh implementasi sederhana:

bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: “Home”,
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: “Profile”,
),
],
)

Bottom navigation meningkatkan pengalaman pengguna dalam berpindah menu utama.

7. Best Practice UI dan Navigasi Flutter

Pisahkan file setiap halaman.
Gunakan folder khusus untuk screens.
Gunakan widget reusable untuk komponen berulang.
Hindari nested navigation yang berlebihan.
Gunakan state management jika navigasi melibatkan data dinamis.

Struktur project yang rapi memudahkan pengembangan jangka panjang.

Cara membuat UI aplikasi dengan Flutter dan navigasi modern tidaklah sulit jika memahami konsep dasar widget dan struktur layout. Dengan kombinasi MaterialApp, Scaffold, layout widget, serta sistem navigasi seperti Navigator dan named route, kamu bisa membangun aplikasi profesional dengan tampilan modern.

Flutter memberikan fleksibilitas tinggi dalam desain UI sekaligus sistem navigasi yang scalable untuk aplikasi kecil hingga enterprise.

Mulailah dari halaman sederhana, tambahkan navigasi terstruktur, dan tingkatkan kompleksitas secara bertahap. Dengan latihan konsisten, kamu bisa membangun aplikasi mobile modern yang siap bersaing di industri. Yuk, Daftar di Karisma Academy!

Cara Membuat UI Aplikasi dengan Flutter dan Navigasi Modern