Modul Pertemuan 1 dan 2

Praktikum pemrograman mobile

Sekilas tentang Flutter dan Dart
Pengertian Flutter adalah framework bersifat ”open
source” yang dikembangkan oleh Google untuk membangun
aplikasi multi-platform hanya dengan satu codebase. Hasil
dari pengembangan aplikasi menggunakan Flutter bisa
berupa aplikasi Android, iOS, Desktop, dan Website.

Flutter menggunakan bahasa pemrograman open source

yaitu Dart, yang juga dikembangkan oleh Google. Dart
dioptimalkan untuk membangun UI
Bagaimana cara Flutter dapat dijalankan pada
beberapa platform berbeda ?
Dart & Flutter adalah Bahasa pemrograman yang di compile

Dicompile oleh dart

Void main () { & flutter tools
ReturnApp(
< kode Native iOS atau
….
Android >
)
}

Dieksekusi dari atas ke

bawah
Dieksekusi oleh mobile device
 Dart adalah pemrograman berbasis objek

Setiap nilai yang ada adalah sebuah objek

Beberapa value yang lebih

Value
kompleks

Text
Widget, Gradient Config object,
‘Hello World’

Numbers
30,21,27

Dibuat berdasarkan rancangan

……. ‘class’
Membuat tampilan text pertama
Dari gambar di atas , pertama tama kita harus
menginisialisasikan package material untuk
tampilan UI, berikutnya membuat fungsi utama
(void main()) dan menuliskan widget berupa text
didalam fungsi utama.
Fungsi
Fungsi: “sesuai permintaan ”

Mendefinisikan fungsi

Void doSomething () {
…..
}

menggunakan fungsi

Void main () {
doSomething();
doSomething();
}
 Fungsi & Parameters

Function may take input value - so its

called “parameters” or “argument”

No Parameter satu Parameter Multiple Parameters

Void main ( ) { …} No void main (text) { …} No void main (a,b) { …}

Multiple parameters dipisahkan

dengan tanda “ , “ dan di definisikan
secara berurutan.
How Flutter Apps Become Active

Main( ) function akan di dengan Dart, mengeksekusi aplikasi yang telah di

eksekusi secara otomatis compile pada mobile device

RunApp( ) harus di dipanggil

Fungsi Run App “tells” pada fluttermengatur apa yang
didalam fungsi Main( )
akan ditampilkan pada layar

Menirim tampilan yang ingin sebuah “widget tree” adalah kombinasi dari nested
ditampilkan “widget tree” ke widget flutter yang membangun sebuah tampilan
fungsi runApp( ) antarmuka.
Widget
Semua tentang Widget
Flutter menyediakan banyak widget bawaan
Tampilan Flutter dibuat menggunakan kombinasi seperti tombol, form input, tata letak dan masih
dari beberapa widget yang saling bercabang banyak lagi. Namun Kamu juga dapat membuat
widget sendiri. Flutter adalah sebuah framework
dengan kumpulan widget. Konsep ini terinspirasi
oleh react native buatan Facebook.
OutlineButton
Untuk melihat darftar widget apa saja yang
sudah disediakan oleh flutter anda bisa
Text mengunjungi alamat berikut :
Start Quiz
[Link]
 Flutter UI dibuat menggunakan widget
Saat menggunakan flutter , anda menggunakan
barisan kode untuk membuat sebuah tampilam

Sebuah kombinasi widget

Center (
Widget –widget saling
child : Text(‘Hello World’), “widget tree”
bersarang satu sama lain
);
 Contoh dari “Widget Tree”

MaterialApp Adalah widget yang diwajibkan oleh kebanyakan aplikasi

Scaffold Screen layout widget yang nantinya akan ditambahkan

styling

Row Widget that yang berfungsiuntuk menambpilkan

multiple child widgets secara bersebelahan

Text Text Text

Visualisasi Pembuatan Widget

Di Flutter, widget dapat dikelompokkan ke dalam beberapa kategori berdasarkan fiturnya, seperti yang
tercantum di bawah :
• Widget khusus platform (Platform specific widgets)
• Widget tata letak (Layout widgets)
• Widget pemeliharaan status (State maintenance widgets)
• Widget independen / dasar platform (Platform independent / basic widgets)
Platform specific widgets

Flutter memiliki widget khusus untuk platform vScaffold vPopupMenuButton

tertentu (Android atau iOS). vAppBar vButtonBar
Widget khusus Android dirancang sesuai vBottomNavigationBar vTextField
dengan pedoman desain Material oleh OS
Android. Widget khusus Android disebut vTabBar vCheckbox
sebagai widget Material. vTabBarView vRadio
Widget khusus iOS dirancang sesuai dengan vListTile vSwitch
Panduan Antarmuka Manusia oleh Apple dan
disebut sebagai widget Cupertino. vRaisedButton vSlider
Beberapa widget material yang paling banyak vFloatingActionButton vDate & Time Pickers
digunakan adalah sebagai berikut : vFlatButton vSimpleDialog
vIconButton vAlertDialog
vDropdownButton
 Platform specific widgets
Beberapa widget Cupertino yang paling sering digunakan adalah sebagai berikut

vCupertinoButton vCupertinoTextField vCupertinoActivityIndicator

vCupertinoPicker vCupertinoDialog vCupertinoAlertDialog
vCupertinoDatePicker vCupertinoDialogAction vCupertinoPopupSurface
vCupertinoTimerPicker vCupertinoFullscreenDialogTrans vCupertinoSlider
ition
vCupertinoNavigationBar
vCupertinoPageScaffold
vCupertinoTabBar
vCupertinoPageTransition
vCupertinoTabScaffold
vCupertinoTabView vCupertinoActionSheet
Layout widgets
Di Flutter, widget dapat dibuat dengan membuat satu atau beberapa widget. Untuk membuat banyak
widget menjadi satu widget, Flutter menyediakan widget dalam jumlah besar dengan fitur tata letak.
Misalnya, widget anak bisa dipusatkan menggunakan widget Center.

Beberapa widget tata letak yang populer adalah sebagai berikut :

• Container - Kotak persegi panjang yang didekorasi menggunakan widget BoxDecoration dengan latar
belakang, batas, dan bayangan.
• Center - Menengahkan widget anaknya.
• Row - Susun anak-anaknya dalam arah horizontal.
• Kolom - Susun anak-anaknya dalam arah vertikal.
• Stack - Atur satu di atas yang lain.
State maintenance widgets
Di Flutter, semua widget berasal dari StatelessWidget atau StatefulWidget. Widget yang diturunkan dari
StatelessWidget tidak memiliki informasi status apa pun tetapi mungkin berisi widget yang diturunkan dari
StatefulWidget. Sifat dinamis dari aplikasi adalah melalui perilaku interaktif widget dan status berubah
selama interaksi. Misalnya, mengetuk tombol penghitung akan menambah / mengurangi status internal
penghitung satu kali dan sifat reaktif widget Flutter akan merender ulang widget secara otomatis
menggunakan informasi status baru.
Platform independent / basic widgets

Flutter menyediakan widget dasar dalam jumlah besar untuk membuat

antarmuka pengguna yang sederhana dan kompleks dalam cara yang tidak
bergantung platform. Widget untuk Platform independent adalah :
• Text
• Image
• Icon
Variabel
Variable
Variabel adalah sebuah simbol yang digunakan • Contoh :
untuk menyimpan nilai. Sedangkan tipe data
adalah jenis nilai yang akan kita simpan. • var judul = "Belajar Pemrograman Dart";
Tipe data dasar pada Dart dibagi menjadi tiga • int harga = 123000;
macam: • double berat = 2.23;
1. Tipe data Angka (Number): int, double
2. Tipe data teks: String
3. Tipe data boolean: bool
Lalu untuk membuat variabel pada Dart, kita bisa
menggunakan kata kunci var dan menuliskan
langsung tipe datanya.
 Tipe data pada variabel

Int Double Num

String Bool Object

Widget
Penggunaan “const”
“const” membantu dart mengoptimalkan performa
penggunaan
Device Memory

<Ox Ox21d365465O>
Const Text(“Hello World ! ”)
Text Widget A

Didefinisikan dan digunakan saat aplikasi

pertamakali dijalankan.
Widget akan disimpan secara internal dalam
memori perangkat tempat aplikasi berjalan.
menghias text “Hello World !”
Memisah tampilan menjadi widget yang terpisah
Memisah widget mempermudah Anda untuk
memecah interface pengguna menjadi bagian tersendiri,
sehingga widget tersebut bisa digunakan kembali yang
bisa digunakan kembali.

Anda juga dapat memisah widget pada file yang terpisah.

Terimakasih