🧩 1. Pengenalan Flutter
Flutter adalah framework UI open-source dari Google untuk membuat aplikasi mobile, web, dan desktop dengan satu basis kode menggunakan bahasa Dart.
🧱 2. Apa itu Widget?
Segala sesuatu di Flutter adalah Widget.
Widget = elemen UI (tampilan) atau struktur tata letak (layout).
Widget bisa bersifat Stateless (tidak berubah) atau Stateful (bisa berubah).
📘 3. Widget Dasar Flutter
Berikut penjelasan dan contoh masing-masing widget dasar:
📝 a. Widget Teks
Menampilkan teks di layar.
Teks(
'Halo Berkibar!',
gaya: Gaya Teks(
Ukuran font: 24,
fontWeight: FontWeight.tebal,
warna: Warna.biru,
),
)
🖼️ b. Widget Gambar
Menampilkan gambar dari internet atau dari aset lokal.
Gambar.jaringan(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
lebar: 150,
)
Atau dari folder aset lokal (misal assets/images/logo.png):
Gambar.aset('aset/gambar/logo.png')
📐 c. Widget Kolom
Menata widget secara vertikal (atas ke bawah).
Kolom(
mainAxisAlignment: MainAxisAlignment.pusat,
anak-anak: [
Teks('Atas'),
Text('Tengah'),
Text('Bawah'),
],
)
📏 d. Widget Baris
Widget Menata secara horizontal (kiri ke kanan).
Baris(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
anak-anak: [
Ikon(Ikon.beranda),
Ikon(Ikon.bintang),
Ikon(Ikon.pengaturan),
],
)
⭐ e. Widget Ikon
Menampilkan ikon bawaan Flutter (Material Icons).
Ikon(
Ikon.favorit,
warna: Warna.merah,
ukuran: 40,
)
🔘 f. Tombol Widget
Beberapa jenis tombol umum di Flutter:
Tombol Tinggi
Tombol Tinggi(
saat ditekan: () {
print('Tombol ditekan!');
},
child: Text('Klik Saya'),
)
Tombol Teks
Tombol Teks(
saat ditekan: () {},
anak: Teks('Tombol Teks'),
)
Tombol Ikon
Tombol Ikon(
saat ditekan: () {},
ikon: Ikon(Ikon.jempol_ke_atas),
)
🧠 4. Membuat Aplikasi Sederhana Flutter
🎯 Tujuan:
Membuat aplikasi sederhana yang menampilkan teks, gambar, dan tombol.
📄 Contoh Kode Lengkap (main.dart):
impor 'paket:flutter/material.dart';
void main() {
runApp(AplikasiSaya());
}
kelas MyApp memperluas StatelessWidget {
@mengesampingkan
Widget membangun(BuildContext konteks) {
kembalikan MaterialApp(
debugShowCheckedModeBanner: salah,
title: 'Aplikasi Flutter Dasar',
rumah: Perancah(
bilah aplikasi: Bilah Aplikasi(
title: Teks('Widget Dasar Flutter'),
centerTitle: benar,
backgroundColor: Colors.blueAccent,
),
tubuh: Tengah(
anak: Kolom(
mainAxisAlignment: MainAxisAlignment.pusat,
anak-anak: [
Teks(
'Selamat Datang di Flutter!',
gaya: GayaTeks(ukuranfont: 20, beratfont: BeratFont.tebal),
),
SizedBox(tinggi: 16),
Gambar.jaringan(
'https://flutter.dev/images/flutter-logo-sharing.png',
lebar: 100,
),
SizedBox(tinggi: 16),
Ikon(
Ikon.favorit,
warna: Warna.merah,
ukuran: 40,
),
SizedBox(tinggi: 16),
Tombol Tinggi(
saat ditekan: () {
print('Tombol ditekan!');
},
child: Text('Tekan Saya'),
),
],
),
),
),
);
}
}
💡 5. Kesimpulan
Widget Fungsi Utama
Teks Menampilkan teks
Gambar Menampilkan gambar
Kolom Menyusun widget secara vertikal
Widget Baris Menyusun secara horizontal
Icon Menampilkan ikon bawaan
Tombol Elemen interaktif (aksi pengguna)
Comments
Post a Comment