Modul Flutter
Modul Flutter
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
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
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()
main.dart
home.dart
Icon_with_label.dart