Scribd
Unggah
72 tayangan21 halaman

Pertemuan3 Widget

Dokumen tersebut membahas tentang widget pada Flutter. Secara garis besar dibahas tentang pengertian widget, jenis-jenis widget seperti stateless widget dan stateful widget, contoh widget seperti text, image, scaffold, dan juga praktik pembuatan aplikasi flutter sederhana menggunakan berbagai jenis widget.

Diunggah oleh

Muhaimin Hasanudin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
72 tayangan21 halaman

Pertemuan3 Widget

Dokumen tersebut membahas tentang widget pada Flutter. Secara garis besar dibahas tentang pengertian widget, jenis-jenis widget seperti stateless widget dan stateful widget, contoh widget seperti text, image, scaffold, dan juga praktik pembuatan aplikasi flutter sederhana menggunakan berbagai jenis widget.

Diunggah oleh

Muhaimin Hasanudin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

Pemrograman Mobile

Pertemuan#3 : Widget

Muhaimin Hasanudin, S.T., M.Kom


Email : [email protected]
Hp : 085810630506
Widget

Widget

General widget

Installasi Flutter

Tugas

Discussion
Pendahuluan
Widget adalah komponen-komponen pendukung
pada Flutter seperti Button, Text, Icon dan lain
sebagainya. Semua yang berada pada tampilan
aplikasi kita disebut dengan Widget.

Widget dibagi dalam 2 jenis: stateless dan stateful


• Stateless Widget adalah widget yang statusnya
tidak berubah seperti tombol atau gambar
• StatefulWidgets dapat menahan status Widget

Sumber :
https://www.geeksforgeeks.org/what-is-
widgets-in-flutter/
Ilustrasi / Analogi Widget
Ilustrasi / Analogi Widget
Stuktur Widget
General Widget
• Scaffold adalah widget utama untuk membuat sebuah halaman pada
flutter, scaffold ini memiliki beberapa parameter yang biasa di
gunakan seperti appBar untuk membuat AppBar, body untuk bagian
tubuhnya, atau juga bisa menambahkan floating action bar, maupun
mengganti warna background bodynya.

• Stateless Widget adalah widget yang berfungsi untuk menampilkan


hal-hal yang sifatnya statis mudahnya setelah data ditampilkan maka
kita tidak akan merubahnya lagi.
General Widget (cont)

• Statefull Widget adalah widget yang digunakan untuk menampilkan


data-data yang dinamis atau data yang kita telah tampilkan sewaktu-
waktu dapat mengalami perubahan.
Layout
• Layout Untuk mengatur tata letak atau posisi widget, maka kita akan
mengenal dua buah widget yaitu Row dan Column
• Row akan menampilkan widget-widget secara horizontal atau sebaris
dari kiri ke kanan, widget Row menggunakan property children artinya
widget ini bisa diisi oleh banyak widget.
Text
• Text berfungsi untuk menampilkan sebuah teks biasa, atau bisa kita
berikan style dengan menambahkan property style.
StatelessWidget
• StatelessWidget adalah class widget yang propertinya immutable,
artinya nilainya tidak bisa diubah.
• Cara membuat StatelessWidget adalah dengan membuat class
turunan (extends) dari class StatelessWidget.
• class MyApp extends StatelessWidget { }
• Pada praktik 01 membuat StatelessWidget yang berisi widget
MaterialApp(). Kemudian di dalam MateralApp() berisi widget lagi:
Scaffold, AppBar, Center, dan Text.
Praktek #1 : Widget
1. Buka Visual Studio Code
2. Klik View/Command Palette..
3. Klik Flutter:NewProject/Application
4. Pilih Folder dan kasih nama file[widget]
Praktik 01 : StatelessWidget
Penjelasan Praktik01
• MyApp adalah StatelessWidget, merupakan widget induk;
• MaterialApp adalah widget yang membungkus beberapa widget yang
menggunakan tema material design 1;
• Scaffold adalah widget untuk struktur dasar material design;
• AppBar adalah widget untuk membuat AppBar;
• Center adalah Widget layout untuk membuat widget ke tengah;
• Text adalah widget untuk membuat teks.
Praktikum#02 :
Mengubah
Warna dan Teks
Praktik #03: Widget Layout

Widget Column() merupakan


widget layout yang dapat
berisi beberapa layout.

Widget yang berada di dalam


widget Column() akan ditata
dalam satu kolom. Sehingga
akan berjejer ke bawah.

Widget Image() dan Text()


ditata dalam satu kolom.

Selain widget Column() ada


juga widget Row() yang
fungsinya menata widget di
dalamnya dalam satu baris
ke samping.
Praktikum 4 :
Text Field

Text field yaitu untuk


membuat sebuah
text input.
Daftar Pustaka
• https://dart.dev/
• https://docs.flutter.dev/ui/widgets/basics
• https://docs.flutter.dev/resources/books
• https://docs.flutter.dev/tools/devtools/inspector
• https://medium.com/flutter-developer-indonesia/belajar-widget-widget-pada-
flutter-flutter-starter-pack-part-1-7f386a02fbb6
• https://www.geeksforgeeks.org/what-is-widgets-in-flutter/
• https://medium.com/komandro-ccit-ftui/tutorial-flutter-widgets-430926aa45
• https://www.anbidev.com/flutter-widget/
• https://jagongoding.com/android/flutter/dasar/container/
• https://docs.flutter.dev/ui
Tugas
1. Apa perbedaan antara StatelessWidgetdan Stateful Widget di
Flutter?
2. Apa itu Navigator dan apa itu Routes di Flutter?
3. Apa perbedaan antara fungsi "main ()" dan "runApp ()" di Flutter?
4. Jelaskan async, await, dan Futures!
5. Apa itu State Management? jelaskan dan gambarkan state
management yang biasa digunakan pada flutter!
6. Buatlah flutter menggunakan widget tentang identitas diri
kalian(free).

Anda mungkin juga menyukai