Materi Perkuliahan

Mobile Programming
Fakultas Ilmu Komputer
Universitas Putra Indonesia YPTK
 Materi Perkuliahan Outline Materi Perkuliahan
1. Membuat Projek Pertama Flutter
2. Struktur Widget pada Aplikasi Flutter
3. Perbedaan Stateful dan Stateless Widget

Mobile Programming
Fakultas Ilmu Komputer
Universitas Putra Indonesia YPTK
Romi Hardianto, S.Kom,
 Klik menu View >> Pilih Command Pallete, lihat gambar berikut ini :

Romi Hardianto, S.Kom, M.Kom

 Pilih Flutter : New Project >> Flutter Application >> Ketik flutter_app >> Enter

Romi Hardianto, S.Kom, M.Kom

 Di dalam MaterialApp widget umumnya memiliki home properti yang dapat diisi oleh
widget Scaffold dan widget lainnya sebagai child. Yang paling penting untuk diingat
tentang flutter adalah semuanya adalah widget dan setiap widget memiliki
kegunaannya masing-masing.

1. MaterialApp( )
2. Scaffold()
3. Standalone widget
4. Single child widget
5. Multiple children widget

Romi Hardianto, S.Kom, M.Kom

 MaterialApp( )
MaterialApp adalah widget paling utama yang akan diakses pertama kali oleh fungsi main().
MaterialApp memiliki properti home yang dimana akan menjadi default route aplikasi.

void main() => MaterialApp( home: Scaffold(), );

Scaffold()
Scaffold adalah widget utama yang ditampilkan di aplikasi kita. Ini pada dasarnya adalah wadah
untuk semua widget lainnya. Jika kita hanya memiliki satu widget di aplikasi pada awalnya, itu
adalah Scaffold. Scaffold juga menampung beberapa fitur dasar aplikasi seperti AppBar, Body,
BottomNavigationBar, FloatingActionButton, dll.

Untuk widget-widget dibawah dari scaffold, kita juga dapat mengklasifikasikannya menjadi tiga
(3) kelompok, yaitu :
 Standalone widget
 Single child widget
 Multiple children widget
Romi Hardianto, S.Kom, M.Kom
 Standalone widget
Standalone widget adalah jenis widget yang tidak mengandung widget lain. Mereka memiliki
fungsi tertentu dan biasanya digunakan oleh jenis widget lainnya untuk mengisi konten, atau
untuk sekedar menjadi styling properties. Contoh dari Standalone widget adalah :

 AppBar
 ImageAsset
Text("Flutter Pertamaku");
 Icon
 Text
 TextStyle

Romi Hardianto, S.Kom, M.Kom

 Single child widget
Sesuai namanya, singe child widget adalah widget yang hanya dapat memiliki SATU widget di
dalamnya. Tipe widget ini memiliki properti yang bernama “child” digunakan untuk memasukan
widget lain kedalam single child widget. Contoh dari single child widget yaitu :
 Center
 Container Container(
 Expanded child: Text("Belajar Flutter"),
 CircleAvatar );
 RaisedButton
 dll

Romi Hardianto, S.Kom, M.Kom

 Multiple children widget
Widget ini dapat memiliki lebih dari satu widget di dalamnya. Tentu dalam setiap aplikasi pasti
kita membutuhkan seperti kolom atau baris baik untuj layout ataupun konten. Untuk membuat
hal seperti itu maka widget multiple children ini yang kamu butuhkan. Ciri dari widget ini yaitu
memiliki properties yang bernama “children“. Contoh untuk multiple children widget yaitu :

 Row Column(
children: <Widget>[
 Column
Text('Ayo Belajar Flutter'),
 GridView Text(‘di Koding Pro'),
 Stack ],
)
 dll
Romi Hardianto, S.Kom, M.Kom
 Sebelum mulai membuat aplikasi dengan Flutter, baiknya pahami dahulu konsep
dasar dari komponen-komponennya. Dalam flutter semua komponen disebut dengan
Widget. Widget memiliki dua tipe yaitu Stateful dan Stateless. Lalu apa perbedaan
Stateful dan Stateless Widget pada aplikasi Flutter ?

Secara sederhana Stateless Widget dapat diartikan sebagai Widget yang tidak dapat
dirubah atau tidak akan pernah berubah.

Misal kita mempunya widget yang berisi text “Belajar Flutter Mantap” maka dari mulai
text itu dibuat sampai aplikasi berjalan pun text tersebut tetap akan selalu menjadi
“Belajar Flutter Mantap“.

Romi Hardianto, S.Kom, M.Kom

 Stateful Widget
Stateful Widget merupakan widget yang dinamis atau dapat berubah. Berbanding
terbalik dengan stateless, stateful widget dapat mengupdate tampilan, merubah
warna, menambah jumlah baris dll. Jadi dapat disimpulkan bahwa apapun widget
yang dapat berubah maka itulah stateful widget.

Merujuk pada contoh kasus sebelumnya dengan text “Belajar Flutter Mantap”, maka
di stateful widget kita dapat merubah text tersebut sesuai kebutuhan. Berikut contoh
code dan tampilan jika kita ingin membuat angka nya menjadi dinamis

Romi Hardianto, S.Kom, M.Kom

 Contoh nyata dalam penggunaan Stateless
Widget biasanya yaitu untuk halaman
“Tentang Aplikasi” yang berisi informasi
nama atau logo aplikasi, versi dan lainya
yang bersifat statis atau tidak perlu ada
perubahan

Romi Hardianto, S.Kom, M.Kom

 Fungsi untuk merubah number pada koding diatas
berubah karena adanya fungsi setState(). setState
fungsinya untuk memberitahu framework bahwa ada
object yang berubah pada State, kemudian akan
melakukan build ulang pada Widget tersebut.

FloatingActionButton adalah tombol icon

mengambang berbentuk lingkaran yang
digunakan untuk mempromosikan tindakan
atau menambahkan sesuatu pada
halaman aplikasi.

Romi Hardianto, S.Kom, M.Kom

 Buka File main.dart
Untuk memulai latihan pertama kita hapus terlebih dahulu semua script yang ada
pada file main.dart ketikan script berikut ini
import 'package:flutter/material.dart';

void main() {
runApp(const Center(
child: Text(
'Hallo Programmer Flutter',
textDirection: TextDirection.ltr,
),
));
}

Ganti versi device ke browser Crhome kemudian tekan F5

Romi Hardianto, S.Kom, M.Kom

 Penjelasan Widget
Pada Flutter, hampir semua komponen UI adalah widget. Baik komponen yang terlihat seperti
teks, tombol, app bar, input teks, dan lain-lain. Pun juga komponen yang tak kasat mata seperti
Center, Column, Row, dan lain-lain.
Dalam membuat UI Flutter, kita sebenarnya adalah menyusun kumpulan widget-widget
sedemikian rupa sampai berwujud seperti yang kita inginkan. Bahkan kita juga bisa membuat
widget kita sendiri yang juga tersusun dari berbagai widget yang lainnya.
Pada kode program di atas, fungsi runApp menerima satu widget yaitu Center. Sehingga
widget Center di sini menjadi root atau akar dari semua widget yang lain.
Widget Center dalam kode di atas memiliki satu buah child yaitu Text untuk menampilkan tulisan
“Hallo Programmer Flutter”.

Romi Hardianto, S.Kom, M.Kom

 Menggunakan Widget dari Material Design
Karena kita memakai Flutter untuk android, maka tampilan yang paling cocok adalah Material design.
Ketika membuat project baru Flutter dengan VSCode, maka material design sudah secara default
include dalam project dan tinggal pakai.
AppBar
Sekarang setelah kita menggunakan widget MaterialApp sebagai root, dan juga kita definisikan
parameter title dan home.appBar.title, tampilan setelah kode di save adalah sebagai berikut:

import 'package:flutter/material.dart';

void main() {
runApp(

MaterialApp(
title: 'Hallo Programmer Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Hallo Programmer Flutter'),
),
)
)

);
}
Romi Hardianto, S.Kom, M.Kom
 Body
Untuk mengisi body, kita tambahkan parameter home.body (di bawah komponen home.appBar)
dengan teks Halo Flutter ? seperti di bawah ini:
import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: 'Hallo Programmer Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Hallo Programmer Flutter'),
),

body: const Center(

child: Text(
'Halo Flutter ?',
textDirection: TextDirection.ltr,
),
),

)));
}

Romi Hardianto, S.Kom, M.Kom