Setelah menyelesaikan bab ini, kamu mampu:
Widget adalah potongan antarmuka (UI). Setiap elemen yang kamu lihat di layar aplikasi Flutter adalah sebuah widget.
Text(
'Halo, Flutter!',
style: TextStyle(
fontSize: 24,
color: Colors.amber,
fontWeight: FontWeight.bold,
),
)
Icon( Icons.favorite, color: Colors.red, size: 40, )
// Gambar dari internet
Image.network(
'https://contoh.com/foto.png',
width: 150,
height: 150,
)
// Gambar dari aset aplikasi
Image.asset('assets/logo.png')
ElevatedButton(
onPressed: () {
print('Tombol ditekan!');
},
child: Text('Tekan Saya'),
)
Container(
width: 150,
height: 110,
color: Colors.amber,
padding: EdgeInsets.all(12),
child: Text('Isi Kotak'),
)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star),
Text('Bintang'),
Icon(Icons.star),
],
)
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Baris Pertama'),
Text('Baris Kedua'),
Text('Baris Ketiga'),
],
)
Center(
child: Text(
'Aku di tengah!',
style: TextStyle(fontSize: 20),
),
)
Padding(
padding: EdgeInsets.all(16),
child: Text('Ada ruang di sekelilingku'),
)
Column(
children: <Widget>[
Text('Atas'),
SizedBox(height: 20), // jarak 20px
Text('Bawah'),
],
)
Row(
children: <Widget>[
Icon(Icons.menu),
Expanded(
child: Text('Aku mengisi sisa ruang'),
),
Icon(Icons.search),
],
)
Card(
elevation: 4,
child: Padding(
padding: EdgeInsets.all(16),
child: Text('Informasi penting'),
),
)
Setiap widget bisa menampung widget lain. Susunannya membentuk "pohon" parent–child.
Kita akan membangun aplikasi profil sederhana dengan menggabungkan widget yang sudah dipelajari.
Rencana susunan (widget tree):
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: ProfilePage()));
}
class ProfilePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profil Saya'),
backgroundColor: Colors.deepPurple,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Foto profil bulat
CircleAvatar(
radius: 50,
backgroundColor: Colors.amber,
child: Icon(Icons.person, size: 50),
),
SizedBox(height: 12),
// Nama
Text(
'Sahil Pratama',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
// Status
Text(
'Siswa RPL - Kelas 10',
style: TextStyle(color: Colors.grey),
),
SizedBox(height: 10),
// Ikon media sosial berjajar
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.facebook, color: Colors.blue),
SizedBox(width: 16),
Icon(Icons.camera_alt, color: Colors.pink),
SizedBox(width: 16),
Icon(Icons.email, color: Colors.red),
],
),
SizedBox(height: 16),
// Kartu detail informasi
Card(
elevation: 4,
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: <Widget>[
Text('Hobi: Coding & Game'),
Text('Kota: Jakarta'),
],
),
),
),
SizedBox(height: 16),
// Tombol edit
ElevatedButton(
onPressed: () {},
child: Text('Edit Profil'),
),
],
),
),
);
}
}
Mari kita bedah bagian per bagian:
// Lengkapi kode di bawah ini!
Column(
children: <Widget>[
Row(
children: <Widget>[
Text('Senin'),
// TODO: tambahkan Selasa dan Rabu
],
),
// TODO: tambahkan SizedBox(height: ...)
// TODO: tambahkan Text('Jadwal Pelajaran')
],
)
Card(
elevation: 4,
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: <Widget>[
Icon(Icons.school, size: 40),
// TODO: Text nama
// TODO: Text jurusan
],
),
),
)
Buat aplikasi profil versimu sendiri dengan menggabungkan semua widget Bab 5.
| Kriteria | Nilai |
|---|---|
| Menggunakan ≥ 6 widget berbeda | 30 |
| Layout rapi (Row, Column, Padding) | 25 |
| Kode berjalan tanpa error | 25 |
| Kreativitas & kerapian tampilan | 20 |
| Total | 100 |
Semua yang sudah kamu kuasai dalam satu peta pikiran:
Text, Icon, Image, Button, Card — menampilkan sesuatu ke layar.
Kotak serbaguna: ukuran, warna, padding, satu child.
Row = mendatar. Column = menurun. Pakai children (banyak widget).
Center = di tengah. Padding = ruang di sekeliling widget.
SizedBox = jarak/ukuran tetap. Expanded = mengisi sisa ruang.
Susunan parent–child. Widget bisa membungkus widget lain.