Cara Membuat Widget Pertama Flutter (Hello World) & Scaffold untuk Pemula
Admin PanduanFlow
14 May 2026
0
komentar
Flutter adalah salah satu framework paling populer untuk membuat aplikasi Android, iOS, Web, hingga Desktop menggunakan satu codebase.
Kalau kamu baru mulai belajar Flutter, materi pertama yang wajib dipahami adalah:
Widget
Hello World
Scaffold
Struktur dasar aplikasi Flutter
Karena semua aplikasi Flutter dibangun menggunakan widget.
Di tutorial ini kita akan belajar:
Cara membuat aplikasi Flutter pertama
Mengenal Scaffold
Membuat AppBar
Membuat Body
FloatingActionButton
Bottom Navigation
Drawer Menu
=====================================================
Apa Itu Widget di Flutter?
Di Flutter, hampir semua hal adalah widget.
Contohnya:
Text
Button
Image
Row
Column
Container
Semua tampilan aplikasi dibuat menggunakan widget.
Ibaratnya:
Widget = komponen UI
Flutter = kumpulan widget
=====================================================
Apa Itu Scaffold?
Scaffold adalah kerangka dasar halaman aplikasi Flutter.
Biasanya Scaffold digunakan untuk:
AppBar
Body
Drawer
Floating Action Button
Bottom Navigation
Kalau tanpa Scaffold, aplikasi biasanya masih terlihat sangat basic.
=====================================================
Step 1 — Membuat Hello World Flutter
Buat file baru lalu tuliskan kode berikut:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Text('Hello World'),
);
}
}
Penjelasan Kode
main()
Fungsi pertama yang dijalankan Flutter.
runApp()
Digunakan untuk menjalankan aplikasi.
MaterialApp
Pembungkus utama aplikasi Flutter.
Text()
Widget untuk menampilkan tulisan.
=====================================================
Step 2 — Menggunakan Scaffold
Sekarang kita ubah aplikasi menjadi lebih rapi menggunakan Scaffold.
class ScaffoldPage extends StatelessWidget {
const ScaffoldPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kodingin App'),
),
body: const Center(
child: Text('Hello World'),
),
);
}
}
Penjelasan
Scaffold
Digunakan sebagai kerangka utama halaman.
AppBar
Bagian header aplikasi.
Biasanya digunakan untuk:
Judul halaman
Tombol back
Action button
Body
Isi utama halaman.
Center
Digunakan supaya widget berada di tengah layar.
=====================================================
Step 3 — Menambahkan Floating Action Button
Floating Action Button biasanya digunakan untuk aksi utama.
Contohnya:
Tambah data
Tambah task
Tambah produk
floatingActionButton: FloatingActionButton(
onPressed: () {
print('Tombol ditekan');
},
child: const Icon(Icons.add),
),
Penjelasan
onPressed
Aksi saat tombol ditekan.
Icon(Icons.add)
Menampilkan icon tambah.
=====================================================
Step 4 — Membuat Bottom Navigation
Bottom Navigation digunakan untuk navigasi utama aplikasi modern.
Contoh aplikasi yang menggunakan Bottom Navigation:
Instagram
TikTok
WhatsApp
Tokopedia
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
Penjelasan
BottomNavigationBar
Widget untuk membuat menu navigasi bawah.
BottomNavigationBarItem
Digunakan untuk item menu.
=====================================================
Step 5 — Membuat Drawer Menu
Drawer adalah menu samping yang biasanya digunakan untuk navigasi tambahan.
drawer: Drawer(
child: ListView(
children: const [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Menu'),
),
ListTile(title: Text('Home')),
ListTile(title: Text('Settings')),
],
),
),
Penjelasan
Drawer
Widget menu samping.
ListView
Digunakan untuk daftar menu.
ListTile
Digunakan sebagai item menu.
=====================================================
Tips Developer Flutter
Supaya project Flutter kamu lebih rapi:
✅ Gunakan Scaffold di setiap halaman
✅ Pisahkan widget menjadi file terpisah
✅ Gunakan naming yang konsisten
✅ Biasakan menggunakan const
✅ Gunakan Center dan Padding agar layout rapi
=====================================================
Login untuk meninggalkan komentar.
Masuk
Komentar (0)