Membuat, Menampilkan, Dan Memodifikasi Objek Interface Dasar

Flutter adalah Cross-Platform Mobile App SDK (Software Development Kit) untuk membuat aplikasi Android dan iOS dari satu codebase (shared) dengan performa tinggi. Saat ini flutter dapat digunakan untuk mengembangkan aplikasi Web, Linux dan MacOS. Namun fitur ini masih dalam tahap beta.

Flutter dikembangkan oleh google dengan tujuan utama mempermudah pengembangan aplikasi mobile. Penggunaan flutter 100% gratis (Open Source). Dart merupakan bahasa pemrograman yang digunakan untuk mengembangkan aplikasi Flutter.

Contoh: Menggunakan Button Widget

1. Cari widget button di katalog widget Flutter
2. Sebagai contoh, kita akan menggunakan FloatingActionButton
3. Pada halaman detail FloatingActionButton terdapat cara memakai widget tersebut.
4. Silahkan copy-pastekan source codenya ke dalam project flutter Anda. Letakkan dibawah widget Text yang telah Anda buat.
5. Save project Flutter Anda. Tampilan akan otomatis berubah berkat fitur Hot Reload

Widget Properties

1. Setiap widget pada flutter memiliki propertinya masing-masing sesuai kegunaan.
2. Untuk mengubah tampilan/fungsi/logic widget, kita perlu mengubah property yang dimiliki widget.
3. Jenis-jenis property yang dimiliki widget dapat ditemukan secara detail di website dokumentasi flutter
4. Tips: tekan ctrl+space pada vscode untuk mengetahui property yang dimiliki sebuah widget

Contoh: Membangun Widget Tree

1. Pada praktek #BeCurious di slide sebelumnya, Anda sudah berhasil membuat widget tree sederhana (Button à Teks)
2. Selanjutnya, anda akan membuat widget tree yang lebih kompleks
3. Anda akan membuat widget tree yang berisi tumpukan container dan ujung widget tree akan diisi oleh teks

Contoh: Uji Pemahaman

1. Buatlah aplikasi seperti dibawah
2. Gunakan widget column, container dan text
3. Pada container, gunakan margin sebesar 16 serta atur width sebesar 300 dan height 60
4. Pada text, gunakan widget TextStyle dan ubah ukuran text menjadi 24

Case Study: Membuat list negara asean

1. Tugas: ubah list yang sudah anda buat pada aplikasi sebelumnya menjadi list negara-negara asean.
2. Perhatikan apa yang terjadi, apakah terjadi error?
3. Terdapat error “Bottom Overflow”
• Ini terjadi karena panjang child melebihi panjang parent (column)
• Untuk mengatasi hal ini, kita perlu menambahkan widget scrollable.
• Salah satu widget scrollable yang paling mudah digunakan adalah SingleChildScrollView
• Sesuai namanya, SingleChildScrollView membutuhkan satu widget saja, dalam hal ini kita akan menggunakan column sebagai childnya.

Building Layout

• Step 0: Create the app base code
• Step 1: Diagram the layout
• Step 2: Implement the title row
• Step 3: Implement the button row
• Step 4: Implement the text section
• Step 5: Implement the image section
• Step 6: Final touch

Building Layout: Create the app base code

Building Layout: Diagram the layout

Building Layout: Implement the title row

Building Layout: Implement the button row

Building Layout: Implement the text section

Building Layout: Implement the image section

Building Layout: Final Touch

Kesimpulan

1. Flutter merupakan multi-platform SDK yang memungkinkan developer untuk mengembangkan aplikasi Android & iOS dengan satu framework
2. Dibanding multi-platform framework lain, Flutter unggul di performa aplikasi karena tidak membutuhkan “jembatan” dalam mengkompilasi aplikasinya
3. Aplikasi Flutter dibangun dengan paradigma “Widget-Tree” dimana objek interfacenya merupakan widget-widget yang memiliki propertinya masing-masing

Sumber Referensi : towardsdatascience.com | statista.com