├── README.md └── img ├── 01 flutter create.png ├── 02 flutter new project.PNG ├── 03 flutter open vs code.PNG ├── 04 flutter doctor error.PNG ├── 05 android studio download.PNG ├── 06 android studio avd.png ├── 07 avd add device.PNG ├── 08 choose system image.PNG ├── 09 sdk manager.png ├── 10 command-line tools.png ├── 11 accept android licenses.PNG ├── 12 choose avd.png ├── 13 run without debugging.png ├── 14 aplikasi berjalan.png ├── 15 struktur folder dart_tool dan idea.PNG ├── 15 struktur folder.PNG ├── 16 struktur folder buiild.PNG ├── 18 struktur folder lib.PNG ├── 19 struktur folder test.PNG ├── 20 struktur file.PNG ├── 21 struktur file pubspec yaml.PNG ├── 22 struktur file pubspec lock dan readme md.PNG ├── 23 contoh flutter app.PNG ├── 24 function main.PNG ├── 25 class widget.PNG ├── 25 struktur widget.PNG ├── 27 extends statelesswidget.PNG ├── 28 pubspec yaml.PNG ├── 29 menambahkan dependency.PNG ├── 30 method build.PNG ├── 31 property home.PNG ├── 31 runApp.png ├── 32 coding flutter.png ├── 33 scaffold.PNG ├── 34 aplikasi berjalan.png ├── 35 visible dan invisible widget.PNG ├── 36 diagram statelesswidget.PNG ├── 37 diagram statefullwidget.PNG └── 38 example statefulwidget.png /README.md: -------------------------------------------------------------------------------- 1 | # Flutter Basics 2 | 3 | Materi Mata Kuliah Pemrograman Mobile | Teknik Informatika UNISNU Jepara | Akhmad Khanif Zyen 4 | 5 | --- 6 | 7 | > **Cara menggunakan modul ini:** 8 | > 9 | > 1. Login ke akun github anda. 10 | > 2. Star ke repository ini. 11 | > 3. Fork repository ini sehingga masuk ke repository di akun github masing-masing. 12 | > 4. Clone project dari repository github masing-masing. 13 | > ```bash 14 | > git clone https://github.com/namauser/flutter-basics.git 15 | > ``` 16 | > 5. Buat branch baru `dev` dan gunakan sebagai branch yang aktif. 17 | > 18 | > ```bash 19 | > git checkout -b dev 20 | > ``` 21 | > 22 | > 6. Mulai praktek, selesai praktek lakukan commit dengan label sesuai materi yang dikerjakan. Untuk project folder, anda bisa buat di dalam folder flutter-basics dengan nama project "project_flutter_pertama" 23 | > 24 | > ```bash 25 | > git add . 26 | > git commit -m "stateful widget" 27 | > ``` 28 | > 29 | > 7. Lakukan push ke repository github masing-masing 30 | > ```bash 31 | > git push -u origin dev 32 | > ``` 33 | > 8. Jika sudah selesai semua, kembali ke repository ini, kemudian masuk ke menu `issue`, tulis identitas diri (NIM, Nama) dan link repo github hasil dari fork project ini. 34 | > 9. Penilaian berdasarkan commit di branch `dev` pada repo akun github masing-masing. 35 | 36 | Di Modul ini, kita akan berkenalan dengan flutter basic, seperti bagaimana kita membuat project flutter, memahami struktur foldernya, struktur codenya dan juga akan membahas salah satu bagian dari flutter yaitu stateless widget dan stateful widget. 37 | 38 | ## Membuat Project Flutter 39 | 40 | Dalam membuat project flutter ada 2 cara: 41 | 42 | 1. Menggunakan terminal/cmd, 43 | 2. Menggunakan IDE (VS Code,Android Studio) 44 | 45 | ### 1. Menggunakan Terminal 46 | 47 | Pertama buka dulu terminalnya, lalu ketikan perintah: 48 | 49 | ```bash 50 | flutter create project_flutter_pertama 51 | ``` 52 | 53 | ![Gambar 1. create project flutter menggunakan terminal](img/01%20flutter%20create.png) 54 | 55 | Gambar 1. create project flutter menggunakan terminal 56 | 57 | Ingat aturan dalam membuat nama project adalah: 58 | 59 | - Semua huruf kecil 60 | - Bila terdapat lebih dari 1 kata, dihubungkan dengan karakter underscore 61 | 62 | ### 2. Menggunakan VS Code 63 | 64 | Klik 65 | 66 | - Windows : ctrl + shift + P 67 | - Mac: command + shift + P 68 | 69 | Lalu pilih, Flutter: New Project 70 | 71 | Kemudian enter, pilih folder penyimpanan, lalu ketikan nama project flutter nya: project_flutter_pertama 72 | 73 | ![Gambar 2. Flutter New Project dari VS Code](img/02%20flutter%20new%20project.PNG) 74 | 75 | Gambar 2. Flutter New Project dari VS Code 76 | 77 | ## Membuka Project Flutter 78 | 79 | Untuk cara pertama, untuk membuka project ke visual studio code, maka pertama kita perlu masuk dulu ke folder projectnya dengan perintah: 80 | 81 | ```bash 82 | cd project_flutter_pertama 83 | ``` 84 | 85 | Setelah itu ketik perintah: 86 | 87 | ```bash 88 | code . 89 | ``` 90 | 91 | Lalu enter 92 | 93 | Untuk cara kedua, otomatis folder project flutter akan terbentuk dan dibuka oleh vscode 94 | 95 | ![Gambar 3. Flutter terbuka di VS Code](img/03%20flutter%20open%20vs%20code.PNG) 96 | 97 | Gambar 3. Flutter terbuka di VS Code 98 | 99 | ## Menjalankan Aplikasi Flutter 100 | 101 | Untuk menjalankan aplikasi Flutter di sistem operasi android menggunakan emulator, kita perlu memastikan dulu apakah android sdk sudah terinstall di laptop kita. Cara cek nya adalah dengan mengetikan perintah berikut pada terminal: 102 | 103 | ```bash 104 | flutter doctor -v 105 | ``` 106 | 107 | ![Gambar 4. Android Toolchain error](img/04%20flutter%20doctor%20error.PNG) 108 | 109 | Gambar 4. Android Toolchain error di dalam perintah flutter doctor 110 | 111 | Bila android toolchain belum centang hijau, ada beberapa langkah yang perlu dilakukan. Langkahnya sebagai berikut: 112 | 113 | ### 1. Download Android Studio dan Install 114 | 115 | Software android studio bisa anda download dari link dibawah. Setelah selesai download, lalu install. Android studio disini akan menjadi tools untuk me manage android emulator. https://developer.android.com/studio 116 | 117 | ![Gambar 5. Download Android Studio](img/05%20android%20studio%20download.PNG) 118 | 119 | Gambar 5. Download Android Studio 120 | 121 | ### 2. Buka Android Studio 122 | 123 | Setelah android studio dibuka, klik More Actions lalu klik virtual device manager. 124 | 125 | ![Gambar 6 Android Studio - Virtual Device Manager](img/06%20android%20studio%20avd.png) 126 | 127 | Gambar 6 Android Studio - Virtual Device Manager 128 | 129 | ### 3. Pilih Device 130 | 131 | Selanjutnya kita diminta untuk memasukan tipe phone 132 | 133 | ![Gambar 7. Add Device - Select Hardware](img/07%20avd%20add%20device.PNG) 134 | 135 | Gambar 7. Add Device - Select Hardware 136 | 137 | ### 4. Pilih System Image 138 | 139 | Setelah itu pilih system image Android. Download bila belum pernah download. Pastikan internet lancar karena akan download file yang besar. Next sampai Virtual Device terbentuk. 140 | 141 | ![Gambar 8. Pilih System Image](img/08%20choose%20system%20image.PNG) 142 | 143 | Gambar 8. Pilih System Image 144 | 145 | ### 5. Masuk Android Studio, Klik More Actions, Pilih SDK Manager 146 | 147 | ![Gambar 9. SDK Manager](img/09%20sdk%20manager.png) 148 | 149 | Gambar 9. SDK Manager 150 | 151 | ### 6. Pilih Tab SDK Tools, centang Android SDK Command-line 152 | 153 | Kemudian setelah berhasil download, kembali ke terminal kembali untuk check apakah android sdk nya siap untuk di konsumsi. 154 | 155 | ![Gambar 10. Android Command-line tools](img/10%20command-line%20tools.png) 156 | 157 | ### 7. Menerima Lisensi Android 158 | 159 | Jalankan perintah 160 | 161 | ```bash 162 | flutter doctor --android-licenses 163 | ``` 164 | 165 | Selanjutnya ketik y enter sampai selesai 166 | 167 | ![Gambar 11. Android Licenses Accepted](img/11%20accept%20android%20licenses.PNG) 168 | 169 | Gambar 11. Android Licenses Accepted 170 | 171 | ### 8. Buka Project yang Sudah Dibuat dengan VS Code 172 | 173 | Disini kita akan melihat struktur folder dan pilihan device yang akan kita gunakan. 174 | 175 | 1. Buka lib/main.dart terlebih dahulu 176 | 177 | 2. kemudian pilih Device di toolbar (default Windows), nanti akan muncul daftar emulator. 178 | 179 | 3. Pilih salah satu emulator. 180 | 181 | ![Gambar 12. Pilih Emulator](img/12%20choose%20avd.png) 182 | 183 | Gambar 12. Pilih Emulator 184 | 185 | ### 9. Pilih Device dan Run aplikasi 186 | 187 | Setelah memilih device, kita dapat lanjut dengan cara klik menu Run dilanjut button run without debugging 188 | 189 | ![Gambar 13. Run Without Debuggnig](img/13%20run%20without%20debugging.png) 190 | 191 | Gambar 13. Run Without Debugging 192 | 193 | ### 10. Aplikasi berhasil dijalankan 194 | 195 | Selanjutnya bila tidak ada problem, maka aplikasi akan tampil di emulator yang sebelumnya sudah kita pilih. 196 | 197 | ![Gambar 14. Aplikasi Berjalan](img/14%20aplikasi%20berjalan.png) 198 | 199 | Gambar 14. Aplikasi Berjalan 200 | 201 | ## Penjelasan File dan Folder Bawaan Flutter 202 | 203 | Setelah project terbentuk, kita akan melihat banyak folder dan file yang sudah dibuatkan oleh flutter. Yuk kita bahas file dan folder folder yang sudah di generate tersebut. 204 | 205 | ![Gambar 15. Struktur Folder Project Flutter](img/15%20struktur%20folder.PNG) 206 | 207 | Gambar 15. Struktur Folder Project Flutter 208 | 209 | Folder, android, ios, linux, macos, web, dan windows adalah folder yang sudah disiapkan khusus oleh flutter supaya aplikasi yang kita buat bisa di jalankan di platform tersebut. 210 | 211 | Disini nanti folder platform yang paling penting adalah folder android karena dalam case program flutter engineering kali ini kita hanya akan fokus pada 212 | development aplikasi android. 213 | 214 | Folder android sendiri adalah folder yang penting karena didalamnya berisi project android lengkap dimana kita dapat membuatnya tanpa flutter, namun disini nanti flutter sdk akan menggabungkan kode flutter kita ke project android, jadi ketika kode flutter kita dikompilasi ke kode asli, pada dasarnya kode asli itu nanti akan disuntikkan ke dalam folder android untuk menjadi aplikasi asli android. 215 | 216 | Dan untuk itu kita tidak begitu perlu merubah apapun di folder ini, dan sangat jarang sekali kita merubah kecuali ada beberapa penyesuaian konfigurasi yang berkaitan dengan update version dan sebagainya. Ini akan dibahas di materi selanjutnya. 217 | 218 | ![Gambar 16. Struktur folder .dart_tools dan .idea](img/15%20struktur%20folder%20dart_tool%20dan%20idea.PNG) 219 | 220 | Gambar 16. Struktur folder .dart_tools dan .idea 221 | 222 | Folder .idea ini menyimpan beberapa konfigurasi untuk android studio. Karena kita nantinya tidak menggunakan android studio untuk editornya, maka kita tidak butuh untuk mengubah apapun di dalam 223 | folder ini. 224 | 225 | Folder .dart_tool sendiri berisi konfigurasi dart package yang di generate oleh flutter. Folder ini pun tidak perlu kita ubah-ubah. Dapat kita abaikan terlebih dahulu. 226 | 227 | ![Gambar 17. Struktur folder build](img/16%20struktur%20folder%20buiild.PNG) 228 | 229 | Gambar 17. Struktur folder build 230 | 231 | Folder build ini akan penting karena folder ini nantinya 232 | akan menampung output dari aplikasi flutter kita. 233 | Contoh file .apk, .abb, .ipa, .exe hasil build ke tiap 234 | platform nanti akan berada di folder ini. 235 | 236 | ![Gambar 18. Struktur folder lib](img/18%20struktur%20folder%20lib.PNG) 237 | 238 | Gambar 18. Struktur folder lib 239 | 240 | Folder lib ini sangat penting bagi kita karena 99% pekerjaan kita nantinya akan dilakukan di folder ini. 241 | 242 | Lib sendiri adalah singkatan dari library dan itu artinya kode dart dan flutter yang kita tulis di dalam lib akan diartikan sebagai library yang akan disuntikan ke dalam kode asli tiap tiap platform. 243 | 244 | Jadi folder ini adalah tempat kita menambah semua file dart dan tempat kita menulis kode. 245 | 246 | ![Gambar 19. Struktur folder test](img/19%20struktur%20folder%20test.PNG) 247 | 248 | Gambar 19. Struktur folder test 249 | 250 | Folder test untuk saat ini belum terlalu penting, didalam folder ini kita dapat menuliskan test untuk kode kita, yang nantinya dapat dijalankan secara otomatis. Salah satu fungsinya adalah ketika kita ada perubahan yang berkaitan kode yang pernah kita tulis test nya, dan ada impact, maka unit test ini akan memastikan apakah impact itu bermasalah apa tidak. 251 | 252 | Ini tentu penting ketika kita mengembangkan aplikasi yang sudah terlalu kompleks. 253 | 254 | ![Gambar 20. Struktur file project flutter](img/20%20struktur%20file.PNG) 255 | 256 | Gambar 20. Struktur file project flutter 257 | 258 | .gitignore berisi list folder atau file yang tidak akan ikut masuk kedalam git repository ketika kita push ke repository tersebut. 259 | 260 | .metadata file ini untuk melacak properties di dalam project flutter, ini berfungsi sebagai alat flutter dalam menilai kemampuan dan peningkatan dan sebagainya, file ini tidak perlu diapa-apakan. 261 | 262 | .analysis_options.yaml berisi konfigurasi untuk melihat statistik analisis kode dart untuk mengecek error, warning, dan linter. Tidak perlu kita apa-apa kan. 263 | 264 | Config.json berisi konfigurasi tambahan ketika kita ingin run aplikasi untuk pertama kalinya di dalam proses development. 265 | 266 | Project_flutter_pertama.iml file yang dikelola oleh flutter sdk dalam mengelola dipedensi internal dan beberapa pengaturan project. Ini file yang tidak perlu kita ubah. 267 | 268 | ![Gambar 21. Struktur file pubspec.yaml](img/21%20struktur%20file%20pubspec%20yaml.PNG) 269 | 270 | Gambar 21. Struktur file pubspec.yaml 271 | 272 | Pubspec.yml merupakan file yang akan sering kita gunakan. File ini yang memungkinan kita untuk mengelola sebagian besar dependensi project kita. 273 | 274 | Apa artinya ini? 275 | 276 | Artinya anda dapat mengkonfigurasi package pihak ketiga kedalam project kita dan dan semua fiturnya dapat langsung kita pakai. 277 | 278 | Kita juga dapat mengkonfigurasi beberapa hal lain disini, seperti misalnya font yang ingin kita pakai, atau gambar yang ingin kita import dari asset. Jadi file ini adalah file yang akan sering kita ubah untuk urusan konfigurasi project. 279 | 280 | ![Gambar 22. Struktur file pubspec.lock dan README.md](img/22%20struktur%20file%20pubspec%20lock%20dan%20readme%20md.PNG) 281 | 282 | Gambar 22. Struktur file pubspec.lock dan README.md 283 | 284 | Pubspec.lock adalah file yang dihasilkan secara otomatis berdasarkan file .yaml, dan ini hanya menyimpan lebih banyak detail tentang semua dependensi yang kita miliki di project flutter kita. Namun ini file yang bukan kita kerjakan. 285 | 286 | README.md ini bisa kita abaikan, bisa juga kita isi sebagai informasi tentang project yang sedang kita bangun. Jadi file ini dapat kita ubah sebagai informasi yang dapat berguna baik developer lain yang berhubungan dengan project flutter ini. 287 | 288 | ## Flutter Basic Widget 289 | 290 | ![Gambar 23. Contoh Flutter App](img/23%20contoh%20flutter%20app.PNG) 291 | 292 | Gambar 23. Contoh Flutter App 293 | 294 | Sebelum mulai membuat layout tampilan aplikasi, sebaiknya kita pahami dulu bagaimana flutter bekerja mengelola berbagai widget menjadi tampilan aplikasi yang tersusun rapi. 295 | 296 | ![Gambar 24. function main](img/24%20function%20main.PNG) 297 | 298 | Gambar 24. function main 299 | 300 | Dalam project flutter, kita mempunya main function seperti halnya dart. function ini tidak memiliki kembalian dan tidak memerlukan argument. 301 | 302 | Seperti yang pernah kita pelajari, main adalah function yang secara otomatis dijalankan ketika aplikasi mulai dijalankan oleh flutter dan dart. Karena ada di file main.dart, kita tidak boleh mengganti namanya. 303 | 304 | ![Gambar 25. Struktur Widget](img/25%20struktur%20widget.PNG) 305 | 306 | Gambar 25. Struktur Widget 307 | 308 | Untuk merubah kode menjadi tampilan dilayar, pertama kita perlu memahami, pada dasarnya tampilan dilayar itu adalah sekumpulan widget. 309 | 310 | Flutter adalah tentang widget, dan setiap aplikasi yang kita buat hanya sekumpulan widget dan widget adalah blok penyusun UI yang dapat kita lihat di layar. Lihat yang saya kotakin merah, itu semua adalah widget. Jika disatukan di dalam satu widget, akan menjadi tampilan yang sesuai dengan kebutuhan UI. 311 | 312 | Widget juga sering berisi widget lain, seperti list daftar yang berisi daftar item. Seperti yang kita lihat di samping, dimana list navigation bar berisi widget item navigation bar. 313 | 314 | Jadi sesungguhnya kita membuat aplikasi flutter kita ini menjadi widget tree, yang memiliki root widget dimana ini merupakan keseluruhan aplikasi kita. 315 | 316 | Sehingga apa yang kita lihat di layar adalah widget yang menampung widget lain. 317 | 318 | ![Gambar 26. Class Widget](img/25%20class%20widget.PNG) 319 | 320 | Gambar 26. Widget MyApp 321 | 322 | Karena semua yang ada di flutter adalah widget, yuk sekarang waktunya kita membuat widget kita sendiri. 323 | 324 | Untuk membuat widget kita perlu membuat class widget adalah object, dan kita memerlukan class untuk membuat object. 325 | 326 | Jadi mari lihat class MyApp baris 7 diatas. Ini adalah contoh class yang nantinya akan menjadi object widget. 327 | 328 | ![Gambar 27. Class StatelessWidget](img/27%20extends%20statelesswidget.PNG) 329 | 330 | Gambar 27. Class StatelessWidget 331 | 332 | Sekarang yang kita lihat adalah MyApp hanya menjadi sebuah class. Sedangkan widget yang benar-benar dapat kita lihat di layar bukanlah hal sepele untuk dibuat, karena pada akhirnya setiap pixel pada layar perlu kita kontrol. 333 | 334 | Disinilah tugas flutter. Flutter sudah memiliki fungsi-fungsi tersebut dibalik layar, jadi kita tidak perlu menulisnya sendiri. Kita hanya perlu menggunakan fitur yang disebut pewarisan (inheritance). 335 | 336 | Ini artinya kita akan membangun di atas class dasar, mendapatkan semua fitur dari class dasar tersebut dan hanya akan menambahkan fitur baru didalamnya. 337 | 338 | Cara pewarisan class yang sudah dibuat oleh flutter adalah dengan menambahkan kata kunci extends setelah nama class dan sebelum kurung kurawal dan memberitahu dart bahwa class ini akan mewarisi class lain dan kita hanya dapat memperluas atau mewarisi satu class dalam satu waktu. 339 | 340 | ![Gambar 28. Pubspec.yaml](img/28%20pubspec%20yaml.PNG) 341 | 342 | Gambar 28. pubspec.yaml 343 | 344 | Terus bagaimana bisa kita menggunakan class dan library yang telah disediakan oleh flutter, jawabannya ada di pubspec.yaml. 345 | 346 | Di file ini, kita dapat melihat bahwa dependencies pertama yang secara default dibuat ketika membuat project flutter adalah dependencies ke sdk flutter. Dimana sdk ini letak nya ada di folder lain di luar project 347 | ini 348 | 349 | ![Gambar 29. Menambahkan dependency](img/29%20menambahkan%20dependency.PNG) 350 | 351 | Gambar 29. Menambahkan dependency 352 | 353 | Dengan adanya dependencies sdk flutter, kita dapat menggunakan semua class class nya kedalam project kita untuk kita perluas lagi dengan cara meng extends class class tersebut. 354 | 355 | Di file ini pulalah nantinya kita dapat mendaftarkan package-package lain yang sudah disediakan oleh flutter ataupun yang dibuat oleh dev lain sudah di publish sebagai library yang dapat kita lihat di pub.dev 356 | 357 | Dalam penulisan package, perhatikan spasi, harus sejajar dengan packages flutter line 33. 358 | 359 | ![Gambar 30. Method build](img/30%20method%20build.PNG) 360 | 361 | Gambar 30. Method build 362 | 363 | Setelah kita membuat class widget yang meng extends class stateless widget. Ada method yang wajib kita implement yaitu `build(BuildContex context)` 364 | 365 | Method ini wajib mengembalikan widget karena disini kita bekerja dengan widget flutter, seluruh aplikasi kita adalah widget. 366 | 367 | `BuildContext` sendiri adalah object khusus yang sudah disediakan oleh flutter lewat material.dart, dimana dia akan selalu membawa informasi meta tentang widget tersebut yang akan diteruskan ke build widget selanjutnya, dan informasi tersebut dapat digunakan oleh widget tree selanjutnya. 368 | 369 | Dalam contoh diatas widget build mengembalikan widget `MaterialApp()` 370 | 371 | ![Gambar 31. Property home pada widget MaterialApp](img/31%20property%20home.PNG) 372 | 373 | Gambar 31. Property home pada widget MaterialApp 374 | 375 | Class widget kita yang kita beri nama MyApp membutuhkan kembalian berupa widget juga. Dan disini saya akan menggunakan widget MaterialApp untuk kembaliannya. MaterialApp ini adalah widget yang sudah disediakan oleh flutter melalui class 376 | material.dart. 377 | 378 | MaterialApp ini memiliki beberapa argumen yang dapat kita gunakan, janis argumennya adalah named argument. Seperti contoh disamping, saya menggunakan argument home untuk memasukan widget text yang bertuliskan Coding Flutter ke dalam widget MaterialApp yang nantinya akan diteruskan ke widget tree MyApp lalu di eksekusi dengan runApp dan akhirnya bisa tampil dilayar. 379 | 380 | ![Gambar 31. Function RunApp](img/31%20runApp.png) 381 | 382 | Gambar 31. Function RunApp 383 | 384 | Untuk menyambungkan widget yang kita buat sampai dengan tampil dilayar, kita akan butuh function yang sudah disediakan oleh flutter melalui material.dart nya yaitu runApp(). 385 | 386 | runApp sendiri function yang disediakan oleh flutter untuk menjalankan aplikasi flutter setelah aplikasi android atau ios di-boot. Alurnya dia akan mencoba mengambil widget tree yang kita buat, dan menggambarnya ke layar yang didasarkan pada widget tree tersebut. Jadi disini dia akan menggambar text Coding Flutter ke layar. 387 | 388 | MyApp didalam runApp harus berupa function dengan cara memberinya kurung buka kurung tutup, karena tanpa itu, MyApp akan hanya menjadi tipe data. 389 | 390 | ![Gambar 32. Running App](img/32%20coding%20flutter.png) 391 | 392 | Gambar 32. Running App 393 | 394 | Ketika di running aplikasi flutter kita, tampilannya akan 395 | seperti ini. 396 | 397 | Dalam tahap ini kita baru memperlihatkan bagaimana text Coding Flutter yang sebelumnya berupa string, sekarang bisa tampil dilayar. Belum memperdulikan tampilan layar yang indah karena belum menambahkan widget lain selain widget Text(). 398 | 399 | Dari hasil yang kita lihat, ini membuktikan bahwa fungsi dasar berjalan baik. Dengan alur widget MyApp yang kita buat dengan tambahan fitur yang disediakan oleh widget stateless berupa method build() diterima oleh fungsi utama untuk menjalankan aplikasi dengan bantuan runApp. 400 | 401 | ![Gambar 33. Widget Scaffold](img/33%20scaffold.PNG) 402 | 403 | Gambar 33. Widget Scaffold 404 | 405 | Untuk mendapatkan tampilan yang lebih indah, kita dapat menggunakan widget lain yang sudah disediakan oleh flutter yaitu widget scaffold. Widget ini mempunyai beberapa argument, yang sering digunakan adalah argument appBar dan body. 406 | 407 | Disamping saya contohkan untuk menambahkan widget scaffold yang saya masukan kedalam argument home yang ada di MaterialApp, lalu di dalam scaffold terdapat appBar. Ini yang nantinya akan menjadi tampilan di bagian anah layar. Lalu terdapat juga body, ini nanti berisi content yang ingin kita kelola. 408 | 409 | ![Gambar 34. Aplikasi berjalan](img/34%20aplikasi%20berjalan.png) 410 | 411 | Gambar 34. Aplikasi berjalan 412 | 413 | Hasil ketika kita jalankan akan seperti yang ada di atas ini. 414 | 415 | Terdapat appbar dengan title Coding Flutter, lalu untuk body nya sendiri masih berupa text dengan Text 416 | Coding Flutter bersama Teknik Informatika. 417 | 418 | Setelah ini kita akan belajar mengenal widget, ada widget yang visible dan invisible. Maksudnya bagaimana yuk lanjut ke bab selanjutnya. 419 | 420 | ![Gambar 35. Visible dan invisible widget](img/35%20visible%20dan%20invisible%20widget.PNG) 421 | 422 | Gambar 35. Visible dan invisible widget 423 | 424 | Di bab sebelumnya sudah mengenal widget text, dimana hasilnya itu dapat dilihat dalam berupa text di layar. 425 | Diatas saya beri ilustrasi bahwa widget itu ada yang terlihat dan ada juga yang tidak terlihat. Baik yang terlihat maupun yang tidak terlihat kedua nya sama-sama penting. 426 | 427 | Widget yang terlihat akan memberikan UI dan UX yang baik bagi user. User dapat berinteraksi dengan aplikasi. Untuk widget yang tidak nampak seperti listview, column, row, ini adalah widget-widget penting yang fungsinya untuk mengatur widget tree supaya widget yang nampak dapat disusun dengan rapi. 428 | 429 | ## Stateless Widget 430 | 431 | ![Gambar 36. Diagram stateless widget](img/36%20diagram%20statelesswidget.PNG) 432 | 433 | Gambar 36. Diagram stateless widget 434 | 435 | Sebelum kita masuk ke stateless stateful pertama perlu tahu apa itu state ? 436 | 437 | State adalah data atau informasi yang digunakan aplikasi atau widget dalam aplikasi kita. 438 | 439 | State sendiri terbagi menjadi 2, yaitu app state dan local state. Stateless dan stateful ini masuk ke dalam local state. 440 | 441 | Stateless sendiri widget yang tidak memiliki state, sehingga perubahan dan hasil render UI nya itu ditentukan oleh inputan yang masuk kedalam stateless widget tersebut. 442 | 443 | ```dart 444 | import 'package:flutter/material.dart'; 445 | 446 | void main() { 447 | runApp(const MyApp()); 448 | } 449 | 450 | class MyApp extends StatelessWidget { 451 | const MyApp({super.key}); 452 | 453 | @override 454 | Widget build(BuildContext context) { 455 | return MaterialApp( 456 | title: 'Flutter Demo', 457 | theme: ThemeData( 458 | primarySwatch: Colors.blue, 459 | ), 460 | home: Scaffold( 461 | appBar: AppBar( 462 | title: const Text('Coding Flutter'), 463 | ), 464 | body: const ShowTextWidget( 465 | text: 'Belajar Coding Flutter bersama Teknik Informatika UNISNU'), 466 | )); 467 | } 468 | } 469 | 470 | class ShowTextWidget extends StatelessWidget { 471 | final String text; 472 | const ShowTextWidget({super.key, required this.text}); 473 | 474 | @override 475 | Widget build(BuildContext context) { 476 | return Text(text); 477 | } 478 | } 479 | ``` 480 | 481 | Seperti kode yang kita lihat di atas ini. Class ShowTextWidget ini extends ke StatelessWidget yang artinya UI akan dirender ketika class ini dipanggil oleh widget lain dengan inputan berupa string text. Jadi dia tidak memiliki state sendiri di dalam dirinya. 482 | 483 | ## Stateful Widget 484 | 485 | ![Gambar 37. Diagram Stateful Widget](img/37%20diagram%20statefullwidget.PNG) 486 | 487 | Gambar 37. Diagram Stateful Widget 488 | 489 | Untuk stateful dia adalah widget yang memiliki state didalamnya. Sehingga class yang meng extends class statefulwidget, akan dapat memiliki internal state nya sendiri, hal ini dapat menguntungkan karena render UI nya tidak hanya bergantung dari inputan dari widget lain, namun dengan memanggil setState maka widget build akan re-run ulang dengan state yang baru tanpa harus menunggu perubahan di widget tree atas nya. 490 | 491 | ```dart 492 | import 'package:flutter/material.dart'; 493 | 494 | void main() { 495 | runApp(const MyApp()); 496 | } 497 | 498 | class MyApp extends StatelessWidget { 499 | const MyApp({super.key}); 500 | 501 | @override 502 | Widget build(BuildContext context) { 503 | return MaterialApp( 504 | title: 'Flutter Demo', 505 | theme: ThemeData( 506 | primarySwatch: Colors.blue, 507 | ), 508 | home: Scaffold( 509 | appBar: AppBar( 510 | title: const Text('Coding Flutter'), 511 | ), 512 | body: const ChangeTimeWidget(), 513 | )); 514 | } 515 | } 516 | 517 | class ChangeTimeWidget extends StatefulWidget { 518 | const ChangeTimeWidget({super.key}); 519 | 520 | @override 521 | State createState() => _ChangeTimeWidgetState(); 522 | } 523 | 524 | class _ChangeTimeWidgetState extends State { 525 | DateTime time = DateTime.now(); 526 | 527 | @override 528 | Widget build(BuildContext context) { 529 | return Column( 530 | children: [ 531 | Text('Jam Sekarang: $time'), 532 | ElevatedButton( 533 | onPressed: () { 534 | setState(() { 535 | time = DateTime.now(); 536 | }); 537 | }, 538 | child: const Text('Perbarui Waktu'), 539 | ), 540 | ], 541 | ); 542 | } 543 | } 544 | ``` 545 | 546 | Seperti class ChangeTextWidget di atas ini, dimana dia meng extends class StatefulWidget. Untuk susunan class nya seperti diatas. Class ini memiliki variable time dan valuenya dapat diganti ketika klik button, setelah itu text akan di set ulang menggunakan DateTime.now(), karena terdapat setState di situ, maka widget build akan di run ulang yang akhirnya menciptakan tampilan baru dengan data yang baru. Berikut hasilnya bila kita running dan klik button Perbarui Waktu. 547 | 548 | ![Gambar 38. Contoh StatefulWidget](img/38%20example%20statefulwidget.png) 549 | 550 | Gambar 38. Contoh Tampilan Aplikasi Menggunakan StatefulWidget 551 | 552 | > **Tugas Latihan 1** 553 | > 554 | > 1. Bagaimana cara membuat project Flutter menggunakan terminal/cmd? 555 | > 2. Apa aturan dalam memberikan nama project pada Flutter? 556 | > 3. Apa saja folder yang secara khusus disiapkan oleh Flutter untuk menjalankan aplikasi pada platform tertentu? 557 | > 4. Apa fungsi dari folder .dart_tools dan .idea? 558 | > 5. Bagaimana cara membuka project Flutter menggunakan Visual Studio Code? 559 | > 6. Mengapa kita perlu memastikan Android SDK terinstall untuk menjalankan aplikasi Flutter di sistem operasi Android? 560 | > 7. Apa langkah-langkah untuk mengatasi masalah "Android Toolchain error" pada perintah flutter doctor? 561 | > 8. Bagaimana cara menambahkan Android SDK Command-line tools melalui Android Studio? 562 | > 9. Apa fungsi dari file .gitignore dalam struktur folder Flutter? 563 | > 10. Mengapa file pubspec.yaml sangat penting dalam pengembangan aplikasi Flutter? 564 | > 11. Apa yang dimaksud dengan widget dalam konteks Flutter? 565 | > 12. Bagaimana pewarisan (inheritance) digunakan dalam pembuatan widget Flutter? 566 | > 13. Apa peran widget MaterialApp dalam pembuatan aplikasi Flutter? 567 | > 14. Mengapa kita membutuhkan fungsi runApp untuk menjalankan aplikasi Flutter? 568 | > 15. Apa kegunaan widget Scaffold dalam struktur aplikasi Flutter? 569 | > 16. Bagaimana cara menambahkan app bar dan body pada widget Scaffold? 570 | > 17. Apa perbedaan antara Stateless Widget dan Stateful Widget? 571 | > 18. Mengapa Stateful Widget disebut memiliki state internal? 572 | > 19. Berikan contoh penggunaan Stateless Widget dalam pembuatan aplikasi Flutter. 573 | > 20. Berikan contoh penggunaan Stateful Widget dalam pembuatan aplikasi Flutter beserta alasan penggunaannya. 574 | -------------------------------------------------------------------------------- /img/01 flutter create.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/01 flutter create.png -------------------------------------------------------------------------------- /img/02 flutter new project.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/02 flutter new project.PNG -------------------------------------------------------------------------------- /img/03 flutter open vs code.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/03 flutter open vs code.PNG -------------------------------------------------------------------------------- /img/04 flutter doctor error.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/04 flutter doctor error.PNG -------------------------------------------------------------------------------- /img/05 android studio download.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/05 android studio download.PNG -------------------------------------------------------------------------------- /img/06 android studio avd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/06 android studio avd.png -------------------------------------------------------------------------------- /img/07 avd add device.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/07 avd add device.PNG -------------------------------------------------------------------------------- /img/08 choose system image.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/08 choose system image.PNG -------------------------------------------------------------------------------- /img/09 sdk manager.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/09 sdk manager.png -------------------------------------------------------------------------------- /img/10 command-line tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/10 command-line tools.png -------------------------------------------------------------------------------- /img/11 accept android licenses.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/11 accept android licenses.PNG -------------------------------------------------------------------------------- /img/12 choose avd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/12 choose avd.png -------------------------------------------------------------------------------- /img/13 run without debugging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/13 run without debugging.png -------------------------------------------------------------------------------- /img/14 aplikasi berjalan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/14 aplikasi berjalan.png -------------------------------------------------------------------------------- /img/15 struktur folder dart_tool dan idea.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/15 struktur folder dart_tool dan idea.PNG -------------------------------------------------------------------------------- /img/15 struktur folder.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/15 struktur folder.PNG -------------------------------------------------------------------------------- /img/16 struktur folder buiild.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/16 struktur folder buiild.PNG -------------------------------------------------------------------------------- /img/18 struktur folder lib.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/18 struktur folder lib.PNG -------------------------------------------------------------------------------- /img/19 struktur folder test.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/19 struktur folder test.PNG -------------------------------------------------------------------------------- /img/20 struktur file.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/20 struktur file.PNG -------------------------------------------------------------------------------- /img/21 struktur file pubspec yaml.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/21 struktur file pubspec yaml.PNG -------------------------------------------------------------------------------- /img/22 struktur file pubspec lock dan readme md.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/22 struktur file pubspec lock dan readme md.PNG -------------------------------------------------------------------------------- /img/23 contoh flutter app.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/23 contoh flutter app.PNG -------------------------------------------------------------------------------- /img/24 function main.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/24 function main.PNG -------------------------------------------------------------------------------- /img/25 class widget.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/25 class widget.PNG -------------------------------------------------------------------------------- /img/25 struktur widget.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/25 struktur widget.PNG -------------------------------------------------------------------------------- /img/27 extends statelesswidget.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/27 extends statelesswidget.PNG -------------------------------------------------------------------------------- /img/28 pubspec yaml.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/28 pubspec yaml.PNG -------------------------------------------------------------------------------- /img/29 menambahkan dependency.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/29 menambahkan dependency.PNG -------------------------------------------------------------------------------- /img/30 method build.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/30 method build.PNG -------------------------------------------------------------------------------- /img/31 property home.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/31 property home.PNG -------------------------------------------------------------------------------- /img/31 runApp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/31 runApp.png -------------------------------------------------------------------------------- /img/32 coding flutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/32 coding flutter.png -------------------------------------------------------------------------------- /img/33 scaffold.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/33 scaffold.PNG -------------------------------------------------------------------------------- /img/34 aplikasi berjalan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/34 aplikasi berjalan.png -------------------------------------------------------------------------------- /img/35 visible dan invisible widget.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/35 visible dan invisible widget.PNG -------------------------------------------------------------------------------- /img/36 diagram statelesswidget.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/36 diagram statelesswidget.PNG -------------------------------------------------------------------------------- /img/37 diagram statefullwidget.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/37 diagram statefullwidget.PNG -------------------------------------------------------------------------------- /img/38 example statefulwidget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khanifzyen/flutter-basics/f344ee2d7a2ce8cc29e800a57d65fe6b7a721ea7/img/38 example statefulwidget.png --------------------------------------------------------------------------------