Pemrograman Mobile Pertemuan 1
0 likes422 views
Dokumen tersebut merangkum materi dasar pemrograman mobile menggunakan Flutter, mulai dari instalasi SDK dan tools, pengenalan widget-widget dasar seperti Container, Text, Image, hingga penggunaan widget-widget lanjutan seperti Drawer, AppBar, BottomNavigationBar.
![TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
Daftar Pustaka
[1] -, “Flutter Tutorial for Beginners #1 Intro & Setup”, Flutter, [Online]. Tersedia:
https://www.youtube.com/watch?v=dgfD3qbjf4Y [Diakses 22 Januari 2022].
[2] -, “Flutter Tutorial for Beginners #2 File Structure & Widget Introduction”,
Flutter, [Online]. Tersedia: https://www.youtube.com/watch?v=9mnHP81D6C4
[Diakses 22 Januari 2022].
[3] -, “Flutter Tutorial for Beginners #3 Container Widget & Text Widget”, Flutter,
[Online]. Tersedia: https://www.youtube.com/watch?v=Vg2zmH1G2mQ [Diakses
22 Januari 2022].
[4] -, “Flutter Tutorial for Beginners #4 Network Image & Asset Image”, Flutter,
[Online]. Tersedia: https://www.youtube.com/watch?v=azmVWauXUvc [Diakses
21 Maret 2022].](https://image.slidesharecdn.com/pmpert1-220926021112-716f42da/85/Pemrograman-Mobile-Pertemuan-1-48-320.jpg)
Pemrograman Mobile Pertemuan 1
- 1. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Pemrograman Mobile Akhmad Khanif Zyen
- 2. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id CPMK • Mahasiswa mampu melakukan instalasi dan menjelaskan struktur file dan widget • Mahasiswa mampu menulis kode program widget berikut dengan baik: • MaterialApp, Scaffold, AppBar, Drawer, BottomNavigationBar, floatingActionButton • Container, Text, Network Image, Asset Image, • ListView, GridView, Row, Column, Expanded, Flexible, • Stack, Align, Positioned, Aspect Ratio, Card, Wrap, • Stateful, BottomNavigationBar, Page Navigation, Transition, • Named Route & Pass Argument, Route Replacement & Clear Route Stack • AppBar, SliverAppBar, TabBar, TabView, Drawer, DrawerHeader, • ElevatedButton, TextButton, OutlinedButton, FloatingActionButton, • TextField, DateTime, DateFormat, Dropdown, Checkbox, Radio, Switch • Form Validation, Dialog, BottomSheets
- 3. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Pertemuan 1 • Sub CPMK : • Mahasiswa mampu melakukan instalasi dan menjelaskan struktur file dan widget • Prasyarat: • Mengetahui dasar pemrograman dart • Mengetahui dasar OOP • Bahan Kajian • Perkenalan, Instalasi SDK, Emulator, dan Editor • MaterialApp, Scaffold, AppBar, BottomNavigationBar, • Drawer, floatingActionButton • Container, Text, Image Asset, Network Image
- 4. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Pendahuluan dan instalasi
- 5. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Mind Map
- 6. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Pendahuluan • Flutter adalah framework yang dibuat dari bahasa pemrograman Dart, dikembangkan oleh Google, untuk membangun aplikasi berbasis UI untuk mobile, web, dan desktop • Waktu development yang lebih cepat dengan fitur hot reload • UI yang disusun dari widget-widget • Performa yang mendekati native.
- 7. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Persyaratan sistem/hardware
- 8. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Instalasi Android/Flutter SDK • Sistem Operasi: Windows, Mac, Linux • Git: untuk instalasi melalui command git clone atau untuk menjalankan flutter upgrade (https://git-scm.com/downloads) • Android studio : hanya dipakai android SDKnya saja (https://developer.android.com/studio) lakukan instalasi wizard android SDK, kemudian masuk ke SDK Manager > SDK Tools > centang Show Package Detail > centang Android sdk command line tools latest, klik Apply untuk instal. • Flutter SDK: (https://docs.flutter.dev/get-started/install ), download dan ekstrak biasa misal di C:, kemudian tambahkan environment variable untuk flutter binary, misal berlokasi di C:flutterbin • Tambahkan environment variabel untuk platform-tools dari Android SDK, misal berlokasi di C:UserskhanifAppDataLocalAndroidSdkplatform- tools • Jalankan flutter doctor untuk memeriksa apakah sistem kita sudah memenuhi syarat.
- 9. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Emulator/devices • Anda bisa menggunakan emulator jika RAM anda minimal 8G • Anda bisa menambahkan emulator melalui android studio, masuk ke AVD Manager, klik Create Virtual Device, kemudian pilih hardware profile (misal Pixel 2), kemudian pilih system image (misal Pie dan pastikan memiliki google play), kemudian klik Finish • Untuk RAM dibawah 8GB atau demi kenyamanan, anda bisa menggunakan device langsung dari smartphone android yang anda miliki dihubungkan ke USB. • Aktifkan terlebih dahulu mode USB Debugging pada perangkat android anda dan mode USB pastikan pada mode transfer file • Jalankan perintah flutter devices untuk melihat device yang bisa digunakan untuk development
- 10. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Instalasi IDE • Visual Studio Code: (https://code.visualstudio.com/download), download dan instal, kemudian install extensions flutter, bracket pair colorizer 2, pubspec assist, material icon theme, prettier • Create project melalui menu View > Command Pallete > ketik Flutter New Project > pilih Application > pilih lokasi folder > masukkan nama project misal my_project_nim. Tunggu hingga proses building pertama kali selesai. • Untuk run project, anda bisa memlih device yang tersedia terlebih dahulu, dan jika device tersebut adalah emulator pastikan running terlebih dahulu. • Klik Run > Run without debugging, tunggu hingga tampilan aplikasi counter berjalan pada emulator/device fisik.
- 11. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Upgrade Flutter • sangat disarankan anda menggunakan channel beta, caranya dengan menjalankan perintah flutter channel beta • Lakukan upgrade dengan perintah flutter upgrade • Tunggu hingga proses upgrade selesai. • Baiknya anda rutin menjalankan perintah flutter upgrade satu bulan sekali untuk memperbarui flutter SDK yang ada di komputer anda.
- 12. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Basic Widget
- 13. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
- 14. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Tipe widget • Seluruh tampilan UI dalam flutter disusun dari widget-widget. • Widget dalam Flutter terdiri dari 2 jenis yaitu Stateless Widget dan Stateful Widget • Stateless widget merupakan widget yang statis dimana tidak ada perubahan nilai/value dalam satu layar. • Stateful widget merupakan widget yang mana dalam satu layar ada minimal satu widget yang memiliki kemungkinan untuk perubahan nilai. Nilai disini disebut sebagai state. • Contoh dalam aplikasi counter terdapat value yang selalu berubah ketika FAB ditekan. Maka dalam satu page widget sebagai extends/turunan dari Stateful Widget.
- 15. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Widget Tree • Sebuah halaman/page merupakan sebuah widget, dimana didalamnya terdiri dari widget-widget
- 16. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Material • Material design merupakan prinsip-prinsiap desain yang dikembangkan oleh google (https://material.io/) • Berbagai macam UI berbasis material design disediakan oleh Flutter SDK (https://docs.flutter.dev/development/ui/widgets/material ). • Sebelum menggunakan widget2 diatas, harus dibungkus dengan widget MaterialApp karena memiliki property home untuk menampung widget • Lebih banyak digunakan untuk theming dan routing • https://api.flutter.dev/flutter/material/MaterialApp-class.html • https://khanifzyen.com/2021/10/17/tutorial-flutter-02- materialapp-widget/
- 17. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Widget Scaffold • mengimplementasikan dasar struktur visual layout dari Material Design • Memakan seluruh layar yang dibagi-bagi kedalam beberapa widget • Widget2 didalamnya seperti Drawer, AppBar, BottomNavigationBar, FloatingActionButton • Scaffold memiliki property body yang dapat diisi untuk membangun UI, posisi tampilan terletak diantara appBar dan bottomNavigationBar • https://api.flutter.dev/flutter/material/Scaffold-class.html
- 18. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id main.dart
- 19. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Drawer (lanjutkan dari project sebelumnya) Pada Scaffold terdapat property drawer yang dapat disi dengan widget Drawer, biasanya sebagai menu burger icon yang terletak pada AppBar https://api.flutter.dev/flutter/material /Drawer-class.html
- 20. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id AppBar (lanjutkan dari project sebelumnya) https://api.flutter.dev/flutter/mat erial/AppBar-class.html
- 21. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id BottomNavigationBar (buat project baru) 1 2
- 22. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id BottomNavigationBar https://api.flutter.dev/flutter/materi al/BottomNavigationBar-class.html 3
- 23. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id BottomNavigationBar source code: https://gist.github.com/khanifzyen2/e0fecef603472412a17f2f7d9aa81 77c
- 24. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id FloatingActionButton (lanjutkan project sebelumnya) • merupakan ciri khas material layout yaitu berupa button yang tetap floating, biasanya terletak di kanan bawah dan berbentuk lingkaran dan terdapat icon didalamnya. • memiliki method yang sama seperti button pada umumnya yaitu onPressed
- 25. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id FloatingActionButton source code: https://gist.github.com/khanifzyen2/abddafd299b17e74c0ee46fc1940 fec6
- 26. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Container
- 27. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Mindmap
- 28. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Container (buat project baru) • container termasuk ke dalam kelompok layout • digunakan sebagai pembungkus untuk widget lain agar memiliki color, padding, margin dan dekorasi yang lain (box, borderRadius dll)
- 29. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Container • jika ingin menambah box dan memberi warna juga, maka property color dipindahkan kedalam widget BoxDecoration • terdapat juga property transform untuk melakukan rotate pada container
- 30. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id
- 31. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Text
- 32. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Text
- 33. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Text (lanjut project sebelumnya)
- 34. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Text source code: https://gist.github.com/khanifzyen2/9af1ac5d5387832961cc32a08a58 038c
- 35. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Image Asset & Network Image
- 36. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Network Image
- 37. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Network Image Buat project baru, dengan isi MyApp > MaterialApp > SafeArea > Scaffold > body: Center > Container
- 38. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Property alignment • Mulai tambahkan child dalam Container, yaitu Image.network() • Memiliki property alignment, untuk mengatur posisi gambar terhadap induk (contoh disini berarti Container) • Alignment.topLeft • Alignment.topCenter • Alignment.topRight • Alignment.center • Alignment.bottomLeft • Alignment.bottomCenter • Alignment.bottomRight
- 39. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Property color dan colorBlend • Property color untuk memberi warna pada image • Property blendMode untuk jenis campuran (blend) antara image dan color • BlendMode.color • BlendMode.colorBurn • BlendMode.colorDodge • BlendMode.darken • BlendMode.difference • dan lain lain silahkan dicoba sendiri
- 40. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Property color dan colorBlend
- 41. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Property fit • fit untuk mengatur seberapa besar image akan memenuhi induknya (Container) • BoxFit.contain • BoxFit.cover • BoxFit.fill • BoxFit.fitWidth • BoxFit.fitHeight • BoxFit.none • BoxFit.scaleDown
- 42. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Property repeat • repeat agar gambar muncul berulang-ulang hingga memenuhi induknya (container) • ImageRepeat.repeat • ImageRepeat.repeatX • ImageRepeat.repeatY
- 43. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Image Asset
- 44. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Image asset • Image akan dibundling dalam package aplikasi • Letakkan image dalam folder assets/images • Daftarkan assets dalam file pubspec.yaml • Panggil dengan Image.asset()
- 45. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Circular image source code: https://gist.github.com/khanifzyen2/0bb25bb0a34df62fd51e1bc250e3 a7d5
- 46. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Circular Image dengan ClipOval
- 47. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Circular Image dengan ClipOval source code: https://gist.github.com/khanifzyen2/3e0bab 1fe7271ddec97e90a288a50649
- 48. TEKNIK INFORMATIKA UNISNU JEPARA https://tif.unisnu.ac.id Daftar Pustaka [1] -, “Flutter Tutorial for Beginners #1 Intro & Setup”, Flutter, [Online]. Tersedia: https://www.youtube.com/watch?v=dgfD3qbjf4Y [Diakses 22 Januari 2022]. [2] -, “Flutter Tutorial for Beginners #2 File Structure & Widget Introduction”, Flutter, [Online]. Tersedia: https://www.youtube.com/watch?v=9mnHP81D6C4 [Diakses 22 Januari 2022]. [3] -, “Flutter Tutorial for Beginners #3 Container Widget & Text Widget”, Flutter, [Online]. Tersedia: https://www.youtube.com/watch?v=Vg2zmH1G2mQ [Diakses 22 Januari 2022]. [4] -, “Flutter Tutorial for Beginners #4 Network Image & Asset Image”, Flutter, [Online]. Tersedia: https://www.youtube.com/watch?v=azmVWauXUvc [Diakses 21 Maret 2022].