Pemrograman Aplikasi Mobile - 6 Flutter (Layout Aplikasi)

Materi slide Flutter (Layout Aplikasi) mata kuliah Pemrograman Aplikasi Mobile mencakup:
1. Definisi dan konsep flutter
2. Fitur utama flutter
3. Perbandingan flutter dengan framework lain
4. Struktur widget flutter
5. Widget flutter
6. Tipe widget flutter
7. Cara kerja widget flutter
8. Struktur dasar layout flutter
9. Layout responsif
10. Alignment dan spacing
11. List dan grid view
12. Custom layout dan widget

1. y Oktober 2024

Pemrograman
Aplikasi Mobile

Flutter
(Layout Aplikasi)
Andi Nurkholis, S.Kom., M.Kom.

Program Studi S1 Sistem Informasi
Fakultas Teknik Industri
Universitas Pembangunan Nasional “Veteran” Yogyakarta

2. Flutter

Flutter adalah framework open-source dari
Google yang memungkinkan pembuatan
aplikasi lintas platform dengan satu basis
kode menggunakan bahasa Dart.

Dengan rendering engine khusus, Flutter Flutter
mendukung performa tinggi dan tampilan Dart
native di berbagai platform seperti Android,

iOS, dan Web.

Widget digunakan sebagai elemen utama untuk

D UI yang interaktif dan deklaratif.

3. < Flutter

Fitur Utama

1. Hot Reload
2. Dart Language
3. Performance

4. Support for Multiple Platforms

4. Dengan Framework Lain

Dalam membangun , ada beberapa framework lain yang
juga populer, seperti dan

5. Widget Flutter a

Widget di Flutter adalah elemen dasar aplikasi, mencakup segala hal dari layout
hingga animasi. Bersifat deklaratif, developer hanya menentukan tampilan, dan
Flutter menangani rendering secara otomatis. Ada dua jenis utama widget:

Y Stateless Widget: Widget yang statis, tidak berubah setelah dibangun.
Stateless widget tidak memiliki "state" internal, dan hanya bergantung pada
properti yang diberikan saat pembuatan.

Y” Stateful Widget: Widget yang dinamis dan dapat berubah selama runtime.
Stateful widget memiliki "state" internal yang memungkinkan widget untuk
bereaksi terhadap perubahan seperti input pengguna atau data yang
berubah.

6. Widget

Hampir semua yang dapat dilihat,
dirasakan, dan berinteraksi di
aplikasi Flutter adalah widget,
termasuk layout, teks, gambar,
tombol, hingga elemen interaktif
lainnya.

Widget adalah elemen modular
yang bisa dikombinasikan untuk
membuat antarmuka pengguna

(Un.

7. Widget Flutter

Contoh widget sederhana dalam Flutter adalah Text untuk menampil
Container untuk membuat area kotak, Row dan Column untuk mengatur tata
letak, serta Button untuk menerima input pengguna.

Text('Hello, Flutter!');

8. Tipe

Widget dalam Flutter dibagi menjadi dua tipe utama, yaitu Stateless dan
Stateful. Keduanya digunakan untuk mengelola tampilan Ul, tetapi
perbedaannya terletak pada kemampuan untuk mempertahankan perubahan
atau state.

Y” StatelessWidget adalah widget yang tidak berubah selama masa hidupnya.
Karena tidak ada state yang dikelola, widget ini cocok untuk komponen yang
sifatnya statis, seperti teks atau ikon yang tidak berubah.

9. Tipe

Contoh penggunaan StatelessWidget:

class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(

child: Text('This is a stateless widget'),

Pada contoh di atas, widget ini hanya menampilkan teks sederhana, dan tidak
ada state yang berubah.

10. Tipe

Y StatefulWidget adalah widget yang bisa berubah selama masa hidupnya.
Berbeda dengan StatelessWidget, stateful widget dapat menyimpan state
internal yang berubah-ubah. Misalnya, jika ingin membuat tombol yang ketika
ditekan mengubah teks, maka dapat menggunakan StatefulWidget.
StatefulWidget terdiri dari dua kelas utama:

1) StatefulWidget: Kelas utama widget yang immutable.

2) State: Kelas yang menyimpan data (state) yang dapat berubah.

11. Tipe

Contoh penggunaan

12. Widget Flutter

Aplikasi Flutter dapat dibangun
menggunakan widget tree, di mana setiap
widget merupakan bagian dari hirarki yang
lebih besar.

Widget induk (parent) berisi widget anak
(child) yang juga bisa berisi widget lain.

Konsep ini mendasari cara Flutter merender
antarmuka, dengan contoh seperti J
MaterialApp sebagai root dan widget seperti *

> AppBar, dan Text di dalamnya.

13. Cara Kerja

Berikut adalah contoh sederhana dari

MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My Flutter App'),
),

body: Center(
child: Text('Hello, World!'),

Pohon widget memegang peranan penting karena menentukan bagaimana
elemen Ul diatur, digabung, dan di-render di layar.

14. Cara Kerja

Y Widget di Flutter bekerja melalui proses deklaratif. Ketika developer
mendefinisikan Ul dengan widget, Flutter akan memetakan setiap elemen
dalam pohon widget untuk merender Ul.

Y Setiap kali state berubah (misalnya ketika pengguna berinteraksi dengan
aplikasi), Flutter merender ulang UI yang terkait dengan state tersebut.

Y” Mekanisme ini didukung oleh fungsi build() yang dimiliki oleh setiap widget.

Y” Fungsi ini dipanggil kembali setiap kali ada perubahan yang membutuhkan
pembaruan UI.

15. Struktur Dasar

Flutter menyediakan berbagai
yang memudahkan
developer untuk membuat
yang dan

Di antara widget yang paling

dasar dan sering digunakan

untuk mengatur tata letak

adalah , »
, dan

16. Layout Flutter

Container digunakan untuk
membuat layout sederhana
dengan mengatur posisi, ukuran,
margin, padding, warna latar
belakang, dan dekorasi lainnya.

Container sering digunakan
sebagai "pembungkus" untuk
widget lain, yang memungkinkan
developer untuk menambahkan
elemen visual atau pengaturan
tata letak seperti padding,
margin, dan border.

Va Container

|

Ñ

Items in Container

7

17. Struktur Dasar Layout Flutter

Properti Penting Container:
Y” padding: Menambahkan jarak di dalam container, antara konten (widget
anak) dan tepi container.

Y” margin: Menambahkan jarak di luar container, antara container dan widget
lain di sekitarnya.

Y” alignment: Mengatur bagaimana konten di dalam container disejajarkan
(misalnya, di tengah, di kanan, atau di kiri).

Y” decoration: Menambahkan dekorasi seperti warna latar belakang, border,
atau bayangan (shadow) pada container.

18. Layout Flutter

Contoh penggunaan widget Container:
Container(

padding: Edgelnsets.a11(16.0),
margin: EdgeInsets.all(8.0),

alignment: Alignment.center,

decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10.0),
»
child: Text(
‘Hello, Flutter!',
style: TextStyle(color: Colors.white, fontSize:
I,

19. Struktur Dasar Layout Flutter

Row dan Column adalah widget untuk membuat layout horizontal da
Keduanya sangat penting dalam mengatur tata letak elemen-elemen dalam
aplikasi Flutter. Row digunakan untuk mengatur widget secara horizontal, dari
kiri ke kanan. Properti penting row:

Y” MainAxisAlignment: Mengatur bagaimana widget disusun sepanjang sumbu
utama (horizontal pada Row).

Y” CrossAxisAlignment: Mengatur bagaimana widget disejajarkan sepanjang
sumbu sekunder (vertikal pada Row).

20. Layout Flutter

Contoh penggunaan widget Row:

Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,

children: <widget>[

Icon(Icons.star, size: 50, color: Colors.blue),
Icon(Icons. favorite, size: 50, color: Colors.red),
Icon(Icons.thumb_up, size: 50, color: Colors.green),

d

21. Struktur Dasar Layout Flutter

Column digunakan untuk mengatur widget secara vertikal, dari atas
Properti penting:

Y” MainAxisAlignment: Mengatur bagaimana widget disusun sepanjang sumbu
utama (vertikal pada Column).

Y” CrossAxisAlignment: Mengatur bagaimana widget disejajarkan sepanjang
sumbu sekunder (horizontal pada Column).

22. Layout Flutter

Contoh penggunaan widget Column

Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

Text('Hello', style: TextStyle(fontSize: 24)),

Text('Flutter', style: TextStyle(fontSize: 24)),

Text('World', style: TextStyle(fontSize: 24)),
1,

23. Struktur Dasar Layout Flutter

Stack adalah widget yang memungkinkan kita menumpuk widget di
sama lain. Widget di dalam Stack diatur dalam urutan tumpukan, di mana widget
pertama ditempatkan di paling bawah, dan widget berikutnya ditempatkan di
atasnya. Properti penting Stack:

Y” alignment: Mengatur bagaimana widget dalam Stack disejajarkan secara
keseluruhan.

Y children: Daftar widget yang akan ditumpuk di dalam Stack.
Untuk penempatan lebih presisi dalam Stack, dapat menggunakan widget

Positioned, yang memungkinkan menentukan posisi widget berdasarkan
properti seperti top, bottom, left, dan right.

24. Layout Flutter a

Contoh penggunaan Stack dan Positioned:

25. Layout Responsif

Layout responsif sangat penting untuk menyesuaikan tampilan dengan
ukuran layar dan orientasi perangkat. Flutter menawarkan beberapa widget dan
mekanisme untuk menciptakan layout responsif, termasuk Flexible, Expanded,
MediaQuery, dan LayoutBuilder.

V Flexible dan Expanded adalah widget yang memungkinkan pengaturan
proporsi layout secara fleksibel dalam kolom (Column) atau baris (Row).
Flexible: Widget ini memberi anaknya ruang yang fleksibel namun tetap
memberikan kebebasan bagi widget anak untuk menggunakan ruang yang
lebih sedikit jika diperlukan. Widget Flexible memiliki properti flex untuk
menentukan jumlah ruang relatif yang harus diberikan ke widget.

26. Responsif

Contoh penggunaan Flexible:

Row(

children: [
Flexible(
flex: 2,
child: Container(color: Colors.red),
Ir
Flexible(
flex: 1,

child: Container(color: Colors.blue),

27. Layout

Contoh penggunaan

Column (
children: [
Expanded (
child: Container(color: Colors.green),
Ir
Expanded(

child: Container(color: Colors.orange),

28. Responsif a

Y” Dalam Flutter, dua mekanisme utama untuk membuat layout responsif
berdasarkan ukuran layar adalah MediaQuery dan LayoutBuilder.
MediaQuery adalah kelas yang menyediakan informasi tentang ukuran layar,
orientasi perangkat, dan berbagai aspek lingkungan tampilan. Anda bisa
menggunakan MediaQuery untuk menyesuaikan tata letak berdasarkan ukuran
layar.

Y” LayoutBuilder menyediakan cara yang lebih dinamis untuk menyesuaikan
tata letak berdasarkan ukuran widget parent-nya. Ini sangat berguna jika
ingin mendefinisikan perilaku yang lebih kompleks daripada yang dapat
dilakukan oleh MediaQuery.

29. Layout

Contoh penggunaan

Widget build(BuildContext context) {

ar screenmidth = Mediaquery.of (context) . siz

return screonWidth > 680
2 Ront
children: [
Expanded(child: Container(color: Colors.red)),

Expanded(child: Container(color: Colors.blue)),

)
olumn(
children: [
Container(color: Colors.red, height: 100),

Container(color: Colors.blue, height: 100),

30. Responsif

Contoh penggunaan LayoutBuilder:

LayoutBuilder(

builder: (context, constraints) {
if (constraints.maxwidth > 600) {
return Row(
children: [
Expanded(child: Container(color: Colors.red)),
Expanded(child: Container(color: Colors.blue)),

} else {
return Column(
children: [
Container(color: Colors.red, height: 100),

Container(color: Colors.blue, height: 100),

31. Alignment & Spacing

Dalam Flutter, pengaturan posisi (alignment) dan jarak antar widget
merupakan elemen penting untuk menciptakan tata letak yang baik. Alignm
digunakan untuk menentukan posisi relatif sebuah widget di dalam widget
parent, seperti Container, Stack, atau Align. Alignment mendukung koordinat
dengan nilai antara -1 dan 1, di mana:

Y” Alignment(-1.0, -1.0) memposisikan widget di sudut kiri atas.

Y” Alignment(1.0, 1.0) memposisikan widget di sudut kanan bawah.

Y” Alignment(0.0, 0.0) memposisikan widget di tengah.

Flutter juga menyediakan konstanta alignment seperti:
Y” Alignment.topLeft

Y” Alignment.center

v Alignment.bottomRight

32. Spacing

Contoh penggunaan alignment di dalam Container:

Container(
width: 200,
height: 200,

color: Colors.blue,
alignment: Alignment.bottomRight,
child: Text('Hello'),

33. Alignment &

Spacer adalah widget yang digunakan dalam widget fleksibel seperti Row atau
Column untuk membuat ruang kosong yang fleksibel. Spacer mengisi ruang di

antara widget dan dapat digunakan untuk mendistribusikan ruang yang tersisa.
Contoh penggunaan Spacer:

Row(
children: [
Text('Left'),
Spacer(),

Text('Right'),
1,

)

34. View

Contoh penggunaan ListView dasar:

ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),

ListTile(
leading: Icon(Icons.photo_album) ,

title: Text("Album'),

1%
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone"),
>
1,

35. List & Grid

Untuk yang atau lebih karena

hanya widget yang terlihat di layar yang akan dibuat, sementara yang lain akan
dibuat secara dinamis saat di-scroll. Contoh penggunaan

ListView. builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(

leading: Icon(Icons.person),

title: Text('Person Sindex'),

36. View

GridView digunakan untuk menampilkan item dalam bentuk grid dengan
kontrol lebih lanjut mengenai jumlah kolom dan jarak antar item. Ada beberapa
cara menggunakan GridView, di antaranya adalah dengan GridView.count dan
GridView.builder. Contoh penggunaan GridView.count:

GridView. count (
crossAxisCount: 2, // Dua kolom
children: <Widget>[
Container(color: Colors.red, height: 100),

Container(color: Colors.blue, height: 100),

Container(color: Colors.green, height: 100),
Container(color: Colors.yellow, height: 100),
1,

37. List & Grid

dioptimalkan untuk menampilkan dan
secara . Hanya item yang terlihat di layar yang akan dirender. Contoh
penggunaan A

GridView.builder(

gridDelegate: SliverGridDelegateWithFixedCrossAx

»
itemCount: 20,
itemBuilder: (context, index) {
return Container(
color: Colors.teal[180 * (index % 9)]
child: Center(child: Text('Item Sindex')),

38. Y” Flutter memungkinkan untuk membangun widget kustom yang fleksibel dan
dapat digunakan kembali, dengan mengkombinasikan widget dasar dan
menerapkan pola manajemen state seperti InheritedWidget dan
ScopedModel.

Y” InheritedWidget memungkinkan widget di bawahnya mengakses data tanpa
harus meneruskannya secara eksplisit melalui constructor.

Y Sedangkan ScopedModel adalah solusi manajemen state yang lebih tinggi

yang memudahkan komunikasi antar widget.

39. Custom

Contoh sederhana 3

class MyInheritedWidget extends Inheritedwidget

final int counter;

InheritedWidget ({
required Widget child,
required this.counter,

}) : super(child: child);

static MyInheritedwidget? of (BuildContext context) {

return context .dependOnInheri tedwidgetOfExactTypecMyInheritedwidget>();

Goverride
bool updateShouldNotify(MyInheritedwidget oldWidget) {

return oldWidget.counter != counter;

40. Layout & Widget

Contoh penggunaan ScopedModel

class CounterModel extends Model {

int _counter = 0;
int get counter => counter;
void increment() {

_counter++;

notifyListeners();

// Menggunakan ScopedModel dalam aplikasi

|ScopedMode1<CounterMode1>(
: CounterModel(),
: MyApp(),

41. y Oktober 2024

Sekian

Terima
Kasih

Andi Nurkholis, S.Kom., M.Kom.

Program Studi S1 Sistem Informasi
Fakultas Teknik Industri
Universitas Pembangunan Nasional “Veteran” Yogyakarta