Latihan Flutter: Memahami AppBar, Column, Row, Padding, dan SizedBox
Flutter merupakan framework UI dari Google yang memungkinkan kita membuat aplikasi mobile dengan cepat dan efisien. Pada artikel ini, saya akan membahas sebuah latihan Flutter sederhana yang bertujuan untuk memahami beberapa widget dasar seperti AppBar, Column, Row, Padding, dan SizedBox.
Artikel ini dibagi menjadi dua bagian:
Kode sebelum eksperimen
Kode setelah eksperimen dan penjelasannya
1. Kode Sebelum Eksperimen
Pada tahap awal, aplikasi Flutter dibuat dengan struktur sederhana menggunakan widget Column untuk menampilkan beberapa teks secara vertikal.
Kode Awal
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Judul AppBar'),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(
'Text Pertama',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 10),
Text(
'Text Kedua',
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
Text(
'Text Ketiga',
style: TextStyle(fontSize: 16),
),
],
),
),
);
}
}
Penjelasan Singkat
AppBar digunakan sebagai header aplikasi
Column menampilkan widget secara vertikal
SizedBox(height: 10) digunakan untuk memberi jarak antar teks
Aplikasi ini menampilkan tiga teks dengan ukuran font berbeda
2. Kode Setelah Eksperimen
Pada tahap eksperimen, dilakukan beberapa perubahan untuk memahami perbedaan dan fungsi widget lainnya.
Eksperimen yang Dilakukan
Mengubah warna AppBar
Mengganti Column menjadi Row
Menambahkan Padding
Mengatur jarak menggunakan SizedBox
Kode Setelah Eksperimen
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Raqi Latihan'),
centerTitle: true,
backgroundColor: Color.fromRGBO(255, 102, 102, 1),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(
'HELLO WORLD',
style: TextStyle(fontSize: 20),
),
SizedBox(width: 15),
Text(
'Helo World',
style: TextStyle(fontSize: 18),
),
SizedBox(width: 15),
Text(
'hello world',
style: TextStyle(fontSize: 16),
),
],
),
),
),
);
}
}
Penjelasan Perubahan
1. Perubahan Warna AppBar
backgroundColor: Color.fromRGBO(255, 102, 102, 1),
Digunakan untuk memberikan warna custom pada AppBar agar tampilan lebih menarik.
2. Column ke Row
Column → susunan vertikal
Row → susunan horizontal
Dengan Row, teks ditampilkan dari kiri ke kanan.
3. Penggunaan Padding
Padding(
padding: const EdgeInsets.all(16.0),
Padding digunakan agar konten tidak menempel ke tepi layar sehingga tampilan lebih rapi.
4. SizedBox sebagai Spasi
SizedBox(width: 15),
Karena menggunakan Row, jarak diatur menggunakan width, bukan height.
Kesimpulan
Latihan ini membantu memahami:
Struktur dasar aplikasi Flutter
Perbedaan penggunaan Column dan Row
Fungsi Padding untuk tata letak
Penggunaan SizedBox sebagai pengatur jarak
Dengan memahami widget dasar ini, kita sudah memiliki fondasi yang kuat untuk membuat tampilan UI Flutter yang lebih kompleks ke depannya.
Komentar
Posting Komentar