Flutter

Lalu Izaq Nune Indraswari, S.Kom

 Introduction Road Map

StatelessWidged
AppBar
& Scaffold

Agenda
Body

Flutter Dasar
Introduction

Presentation Title 3
 Flutter
Apa itu Flutter, dan apa bedanya dengan UI toolkit yang lain? Untuk
menjadi pengembang aplikasi Flutter, Anda hanya perlu mengingat ini:
Flutter dibuat agar berfungsi untuk perangkat apa pun dengan layar dan
berfungsi dengan:
· iOS dan Android
· Web dan Desktop (Mac, Windows, dan Ubuntu) — Bahkan mendukung
PWA

Presentation Title
 Memasang Project Flutter
Mari kita mulai tutorial Flutter ini dengan beberapa langkah di sini:
Membuka konsole/terminal (CMD) di komputer
ketikkan perintah ini dan jalankan.
flutter create <app_name>

Presentation Title
 Widget
Widget dibagi dalam 2 jenis: stateless dan stateful
Stateless Widget adalah widget yang statusnya tidak berubah seperti tombol atau
gambar. Seperti namanya, statusnya tidak berubah saat tindakan dilakukan di layar.
Saat widget perlu menahan beberapa status seperti halaman saat ini di Page View, tab
yang saat ini dipilih di sebuah Bottom Navigation Bar, Widget stateful adalah pilihan
yang tepat untuk dibuat.
StatefulWidgets dapat menahan status Widget saat ini. Daripada menggunakan widget
utnuk membangun method, Stateful Widget memiliki state untuk build metode yang
terpanggil setiap kali kita secara eksplisit memanggil setState.
Dan Demikian pula, lihat dokumentasi (ada video di dalamnya) untuk widget stateful di
sini:
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

Presentation Title
ANNUAL
REVENUE
GROWTH
Roudmap Mobile
Flutter Roadmap
5 Route &
Navigasi

6 ListView
GridView
Layout 4 Input Control
Row
3
Column 7 Crud Static
Widget Body Latihan
AppBar() 2 Container()
1 Title() Stack
Actions()

1 11 2 3 4 5 6 7

2022 2022 2022 2022

StatelessWidged & Scaffold

Stateless/fulWidget : Ibarat sebuah Bingkai Papan Lukisan Yang Belum

diberikan Papan Lukisan

Scaffold()
Dari segi Bahasa artinya andang-andang atau perancah. Dari segi
istilah : Ibarat Sebuah Papan Lukisan Yang Belum Diberikan
Coretan atau andang-andang dalam sebuah konstruksi bangunan.
StatelessWidget
Scaffold()/Perancah atau Andang-andang
Scaffold(): memiliki banyak parameter.
Appbar()
Body()
Floatingactionbuton()
bottomNavigationBar()
Dll.
 TextWidget
Text Widget dibagi menjadi dua properties yaitu : String yang merupakan data dan nantinya akan ditampilkan
kelayar, lalu properti kedua merupakan argument berbentuk Object yang dimana berfungsi untuk memanipulasi
tampilan seperti warna, ukuran, posisi dll. Argument pada Text bersifat opsional (tidak wajib)
Text(
String data,
{
Key key,
TextStyle style,
StrutStyle strutStyle,
TextAlign textAlign,
TextDirection textDirection,
Locale locale,
bool softWrap,
TextOverflow overflow,
double textScaleFactor,
int maxLines,
String semanticsLabel,
TextWidthBasis textWidthBasis,
TextHeightBehavior textHeightBehavior
}
);

Modul Flutter
 TextWidget dengan TextStyle
TextStyle pada Text Widget berfungsi untuk memanipulasi jenis font, ukuran, warna, jenis font dan lainnya.
Berikut cara penggunakan TextStyle pada Text Widget.

child: Text(
'Ini Text Pertama Saya',
style: TextStyle(fontWeight: FontWeight.bold),
)

Modul Flutter
 AppBar()
Appbar(): memiliki parameter yaitu:
leading : widget yang tampil pada sebelah kiri, yang berfungsi untuk menampilkan navigation drawer.
title : widget yang tampil setelah leading, untuk menaruh widget text pada
judul appbar.
Actions : di action ini kita bisa mencambahkan icon lebih dari satu di
karenakan memakai tipedata list/array.
Elevation: untuk menghilangkan bayangan pada appbar.
AppBar( leading,title,action)
 Body
Body berfungsi untuk menaruh semua widget pada satu halaman scaffold.
Widget yang kita pakai ada beberapa macam yaitu:
1. Container (Wadah)
2. Stack (Tumpuk)
3. Flexible
4. Extended
5. Layout -> Column (Kolom) dan ->Row (Baris)
 Container
Container secara Bahasa artinya wadah/tempat.
Secara istilah artinya widget yang ada pada wadah akan ditampung kedalam child (anak).
Child ini hanya bisa menampung 1 widget.
Container juga memiliki beberapa parameter yang kita gunakan yaitu:
Container({
super.key,
this.alignment,
this.padding (lapisan) = untuk jarak pada lapisan container,
this.color = untuk mengubah warna pada container,
this.decoration = untuk memasukkan hiasan pada container seperti memasukkan gambar, border radius, dll,
this.foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
this.margin (batas) = untuk membatasi letak pada container,
this.transform,
this.transformAlignment,
this.child = untuk memasukkan widget lain dalam container,
this.clipBehavior = Clip.none,
})
Container
 Image in Container
Memasukkan gambar pada container kita membutuhkan parameter decoration (hiasan).
Decoration memiliki atribut juga untuk meradiuskan ujung tepi pada bordernya.
Untuk memasukan gambar ada beberapa cara yaitu:
Sebelum kita menuju codingan kita butuh ubah pubspec.yaml
Ubah codingan pada pubspec.yaml, dengan cara menghapus tanda #.
hati hati pada penulisan pada extension .yaml karena format penulisan seperti Bahasa
pemrograman python yaitu indentasi space.
Indentasi space adalah hal yang super-super penting, karena ia bertugas untuk
mendefinisikan struktur blok kode program.
Sehingga, melakukan kesalahan indentasi juga bisa berujung pada sebuah error.
 Gambar pada Container
Memasukkan gambar pada container :
1. Dengan menggunakan Image.asset(‘lokasi file yang disimpan’).
2. Asset.image(‘lokasi file yang disimpan’).
3. Image.network(‘url gambar yang dituju’).

1 2
 Stack
Stack secara Bahasa artinya tumpukan
Secara istilah artinya widget yang ada pada widget bisa ditumpuk atau ditampung kedalam children (anak-
anak).
Stack juga termasuk dalam kelompok multiple widget.
Children kebalikanya dengan child yang bisa menampung lebih dari 1 widget.
Di Stack juga kita bisa tambahkan widget tambahan yaitu:
Positioned (Posisi) : yang memiliki parameter atau atribut berfungsi untuk
Mengatur posisi pada layer.
Positioned({

super.key,

this.left,

this.top,

this.right,

this.bottom,

this.width,

this.height,
Modul Flutter | Lalu Izaq

required super.child,
 Stack

Modul Flutter | Lalu Izaq

 Stack dengan Positioned

Jarak tepi kiri pada layer 40

Dan jarak tepi atas pada layer 60

Modul Flutter | Lalu Izaq

Layout (Tata Letak)
Layout
Layout->Column
Layout->Row
Latihan Layout Column & Row
Latihan Dirumah Untuk Slicing Design
 Input Control
Sebuah fitur digunakan sebagai pengolah masuknya data pada pada user, beberapa input control yang ada dalam
Bahasa Pemrograman pada umumnya yaitu:

1. Button
2. Textfield
a. Texfield General
b. Texfield Password
c. Textfield Number
d. Textfield Email
e. dll
3. Radio Button
4. Checkbox
5. dll
Untuk membuat input control kita harus menggunakan terlebih dahulu fitur Container()

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 StateFulWidget
Seperti di awal pertemuan kita sudah menggunakan statelessWidget : widget yang di dalamnya tidak berubah.
Untuk kali ini kita akan menggunakan StateFulWidget : dimana widget yang di dalamnya itu bisa berubah
sesuai yang kita inginkan.

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 Button Without Icon

Batas vertical antara AppBar dengan Button 10 Pixel

Untuk versi fluttedr 2 menggunakan RaisedButton

Sedangkan versi flutter ver 3 menggunakan Elevated Button

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 Button With Icon Batas vertical antara AppBar dengan Button 10 Pixel

Untuk versi fluttedr 2 menggunakan RaisedButton

Sedangkan versi flutter ver 3 menggunakan Elevated Button

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 TextField
Batas vertical antara AppBar dengan TextField 10 Pixel

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

 Latihan Textfield,
RadioButton, Checkbox

Buatlah Input Control Seperti Biiodata

Terdiri dari
TEXTFIELD
Username :
Nama Lengkap :
Alamat :
No. Hp :
RADIO BUTTON:
Jenis Kelamin: Lakilaki & Perempuan
TEXTFIELD PASSWORD:

Mobile Dasar | Lalu Izaq Nune Indraswari, S.Kom

Navigation Routing
Navigation Route secara Bahasa artinya rute perjalanan.
Secara istilah artinya widget yang bisa berpindah tempat atau menampilkan
konte atau layer baru.
Navigator yang biasa di gunakan ada beberapa macam yaitu:
1. Navigator.push (): metode push digunakan untuk menambahkan rute
(halaman) lain ke atas rute (halaman) sebelumnya dengan cara di stack
(tumpuk).
2. Navigator.pushReplacement(): metode push digunakan untuk
memindahkan rute (halaman) selanjutnya dengan cara menghapus rute
(halaman) sebelumnya.
3. Navigator.pop: Metode pop menghapus rute paling atas dari tumpukan.
Navigator Push
Cara menggunakan Navigator push.
Navigator.push(context, route);
Kata route disini kita akan pakai untuk menyebut rute yang kitatuju dengan menggunakan MaterialPageRoute
Navigator.push(context, MaterialPageRoute(
builder: (context) => Layer(),
));
Navigator Push pada halaman selanjutnya memiliki leadin
Icon Back untuk bisa Kembali kehalaman sebelumnya.
Navigator Push Replacement
Cara menggunakan Navigator pushReplacement.
Navigator.pushReplacement(context, route);
Kata route disini kita akan pakai untuk menyebut rute yang kitatuju dengan menggunakan MaterialPageRoute
Navigator.pushReplacement(context,
MaterialPageRoute(
builder: (context) => Layer(),
));
Navigator Push Replacement tidak memiliki leading
Icon Back.
 Extract Widget

Tekan di Keyboard: ( Ctrl + titik )

Klik kanan pada icon lampu kuning

Mobile Dasar Flutter ( Izaq Qiuqiu)

 Split Class
Membuat folder presentation & widgets

Dalam folder presentation

Buatlah folder dashboard & Home

Buatlah file home.dart didalam folder Home

Buatlah file icon_with_label.dart didalam folder Home

Mobile Dasar Flutter ( Izaq Qiuqiu)

 Split Class

main.dart

home.dart

Icon_with_label.dart

Mobile Dasar (Izaq Qiuqiu)