MODUL FLUTTER

Anggi
[COMPANY NAME] [Company address]
 I. PERTEMUAN 1

1. TENTANG FLUTTER
2. INSTALASI FLUTTER
Tiap system operasi memiliki konfigurasi dan pengaturan yang berbeda-beda. Maka sesuaikan dengan
kondisi system yang dimiliki laptop Anda.
• WINDOWS
• System Requirement
Untuk melakukan install dan menjalankan Flutter di windows, terdapat beberapa minimal kebutuhan
system yang harus dipenuhi yaitu:
✓ Operating Systems: Windows 10 or later (64-bit), x86-64 based.
✓ Disk Space: 1.64 GB (tidak termasuk resource untuk IDE/tools).
✓ Tools: Flutter depends on these tools being available in your environment.
✓ Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
• Langkah Pemasangan
Setelah kebutuhan system telah terpenuhi maka langkah selanjutnya adalah melakukan pemasangan.
Terdapat beberapa langkah yang bisa dilakukan untuk mulai melakukan pemasangan FLUTTER yaitu :
✓ Download Flutter SDK di :
https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutt
er_windows_3.10.6-stable.zip
✓ Ekstrak zip file dan letakkan folder flutter di direktori yang diinginkan untuk
menempatkan Flutter SDK. Sebagai contoh C:\Development. Jangan meletakkan
folder Flutter di direktori yang namanya mengandung special karakter atau spasi.
Selain itu juga jangan meletakkan di direktori yang membutuhkan privileges seperti
C:\Program Files.
✓ Temukan flutter_console.bat file di folder flutter. Lalu jalankan dengan double klik
atau klik kanan running files.

1
✓ Berikut adalah tampilan dari console Flutter saat dijalankan :

✓ Langkah selanjutnya yaitu UPDATE PATH. Langkah ini bertujuan agar Flutter bisa
dijalankan di command prompt atau terminal. Berikut adalah langkahnya :
o Ketik ‘env’ di Start Menu, lalu pilih Edit Environment Variable for Your Account.

o Pilih Environment Variables yang berada di bagian bawah

2
o Pada bagian daftar user variable pada jendela Environment Variables, pilih
Path lalu klik Edit.

o Tambahkan alamat SDK Flutter\bin yang telah diatur sebelumnya. Jika Edit
Environment berupa single line input, gunakan tanda titik koma (;) sebagai
separator. Jika tidak, cukup ditambahkan di baris baru.

3
 o Pastikan Flutter bisa dijalankan via cmd dengan mengetik command ‘flutter’
lalu enter. Akan muncul tampilan seperti berikut :

✓ Menjalankan FLUTTER DOCTOR.

Flutter doctor merupakan perintah yang digunakan untuk mengecek kelengkapan dari
framework FLUTTER yang digunakan, seperti versi flutter yang digunakan, Android SDK, iOS
SDK (hanya di MacOS), device yang terhubung dan lain sebagainya. Lakukan pengecekan
secara berulang dan pastikan dependensi untuk setup sudah lengkap. Jalankan perintah
berikut untuk membuka flutter doctor :

Perintah ini akan melakukan pengecekan environment dan menampilkan laporan ke jendela
terminal/cmd. Flutter SDK sudah termasuk dari Dart SDK, sehingga tidak perlu melakukan penginstalan

4
 Dart secara terpisah. Cek output secara teliti terutama untuk software lain yang perlu diinstall dan
melakukan beberapa Tindakan lebih jauh. Biasanya ditulis dengan huruf tebal di terminal.
Sub ini menjelaskan bagaimana melengkapi proses instalasi Flutter SDK. Setelah menginstall
dependensi yang kurang, jalankan kembali perintah flutter command untuk memverifikasi bahwa
semua yang dibutuhkan telah diatur dengan benar.
Jika semua issue telah diselesaikan. Maka tampilan hasil command flutter doctor seperti berikut :

3. INSTALASI ANDROID STUDIO

• WINDOWS
• Langkah Pemasangan
✓ Download Android Studio di : https://developer.android.com/studio
✓ Start Android Studio, dan lihat pada bagian ‘Android Studio Setup Wizard’. Bagian ini akan
menginstall Android SDK, Android SDK Command-line Tools dan Android SDK Build-Tools
terbaru.
✓ Jalankan perintah flutter doctor untuk mengkonfirmasi bahwa Flutter telah mengetahui lokasi
instalasi/pemasangan Android Studio yang sudah diinstall. Jika Flutter belum bisa
mengalokasikan, jalankan perintah flutter config --android-studio-dir=<directory> untuk
mengatur direktori dimana Android Studio diinstall. <directory> bisa diganti dengan lokasi
default windows "C:\Program Files\Android\Android Studio"Berikut

4. MENGATUR ANDROID DEVICE

To prepare to run and test your Flutter app on an Android device, you need an Android device running
Android 4.1 (API level 16) or higher.
• WINDOWS
• Enable Developer options and USB debugging on your device. Detailed instructions are available in
the Android documentation
• [Optional] To leverage wireless debugging, enable Wireless debugging on your device
• Using a USB cable, plug your phone into your computer. If prompted on your device, authorize
your computer to access your device.
• In the terminal, run the flutter devices command to verify that Flutter recognizes your connected
Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based.

5
 If you want Flutter to use a different installation of the Android SDK, you must set the
ANDROID_SDK_ROOT environment variable to that installation directory

5. AGREE TO ANDROID LICENSES

Before you can use Flutter, you must agree to the licenses of the Android SDK platform. This step
should be done after you have installed the tools listed above.
• Open an elevated console window and run the following command to begin signing licenses

• Review the terms of each license carefully before agreeing to them. Press ‘y’ if you agree of each
license.
• Once you are done agreeing with licenses, run flutter doctor again to confirm that you are ready to
use Flutter

6. ADDITIONAL WINDOWS REQUIREMENTS

For Windows desktop development, you need the following in addition to the Flutter SDK:
• Visual Studio 2022 or Visual Studio Build Tools 2022 When installing Visual Studio or only the
Build Tools, you need the “Desktop development with C++” workload installed for building windows,
including all of its default components.

7. INSTALL VS CODE
• Download the Visual Studio Code installer for Windows
• Once it is downloaded, run the installer (VSCodeUserSetup-{version}.exe). This will only take a minute
• By default, VS Code is installed under C:\Users\{Username}\AppData\Local\Programs\Microsoft VS
Code. Alternatively, you can also download a Zip archive, extract it and run Code from there.
• Tip: Setup will add Visual Studio Code to your %PATH%, so from the console you can type 'code .' to
open VS Code on that folder. You will need to restart your console after the installation for the change
to the %PATH% environmental variable to take effect.

8. INSTALL THE VS CODE FLUTTER EXTENSION

• Start VS Code.
• Open a browser and go to the Flutter extension page on the Visual Studio Marketplace.
• Click Install. Installing the Flutter extension also installs the Dart extension.

9. ISSUE YANG BISA MUNCUL

• cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`

Solusi yang bisa digunakan yaitu melakukan install cmdline tools dari Android Studio dengan cara
seperti berikut :
• Buka Android Studio
• Pillih menu Tools -> SDK Manager
6
• Lalu jendela SDK Manager terbuka. Pada bagian jendela Android SDK yang terbuka, pilih tab SDK
Tools. Lalu centang di bagian Android SDK Command-line Tools (latest). Lalu klik OK

• Android Studio akan mengunduh dan menginstall command line tools.

7
 II. PERTEMUAN 2

1. INSTALL FLUTTER PLUGIN

• ANDROID STUDIO
Untuk memulai melakukan pemasangan Flutter Plugin, silahkan ikuti langkah berikut :
a. Buka Android Studio
b. Klik IDE and Project Settings di bagian kanan atas Android Studio.

c. Pilih Plugins

d. Kemudian jendela Setting akan muncul. Di bagian tab Plugins, ketik Flutter. Lalu klik pada Install,
Apply dan OK.

8
 e. Restart Android Studio jika dibutuhkan.

• VISUAL STUDIO CODE

Berikut adalah langkah-langkah yang bisa dilakukan untuk melakukan pemasangan plugin flutter pada
VS Code :
a. Buka VS Code yang sudah terpasang
b. Aktifkan Command Palette dengan cara View -> Command Palette atau dengan Ctrl+Shift+P

c. Pada Command Palette ketik install lalu pilih Extension : Install Extension

9
d. Atau langsung klik panah icon Extension di sebelah kiri jendela VS Code

e. Ketik Flutter, lalu pilih Install di bagian Flutter. Tunggu sampai proses pemasangan selesai.

f. Reload VS Code
g. Opsi : Jika terjadi error “This extension has been disabled because the current workspace is
not trusted.”
Selesaikan dengan melakukan klik pada tombol “Manage” di peringatan. Lalu pada “Workspace
Trust” yang terbuka, klik tombol “Trust Workspace”. Selanjutnya extension Flutter sudah enable.
h. Lakukan validasi pemasangan dengan cara mengaktifkan Command Palette dengan cara View ->
Command Palette
i. Lalu ketik “doctor” dan pilih Flutter : Run Flutter Doctor.

j. Jika Flutter berhasil dinstall akan muncul di jendela output hasil dari perintah Flutter Doctor yang
menjelaskan environment dari Flutter di system anda.

10
2. MENAMBAHKAN PHYSICAL DEVICE
• Mengaktifkan Developer Option
Agar android device bisa digunakan untuk melakukan debug, maka Developer Option perlu
diaktifkan. Cara mengaktifkannya sebagai berikut :
a. Buka Setting -> About Phone
b. Pada baris Build Number, tab sebanyak 7x
c. Developer Option akan aktif dan akan muncul pemberitahuan bahwa anda sekarang adalah
pengembang.
d. Return to Settings and then tap System > Developer options.
e. If you don't see Developer options, tap Advanced options.

f. Tap Developer options and then tap the USB debugging toggle to turn it on.

11
• Install the Google USB Driver (Windows only)
Langkah-langkah pemasangan sebagai berikut :
a. In Android Studio, click Tools > SDK Manager.
b. Click the SDK Tools tab. Select Google USB Driver and then click OK.

12
 c. When done, the driver files are downloaded into the android_sdk\extras\google\usb_driver
directory. Now you can connect and run your app from Android Studio.

• Menambahkan Device di Android Studio

Agar bisa menjalankan app di physical device melalui USB cable :
a. Connect your Android device to your computer with a USB cable. A dialog should appear on your
device, which asks you to allow USB debugging

b. Select the Always allow from this computer checkbox and then tap OK
c. In Android Studio on your computer, make sure your device is selected in the dropdown.

d. Select your device and then click OK. Android Studio installs the app on your device and runs it.
e. If your device runs an Android platform that isn't installed in Android Studio and you see a
message that asks whether you want to install the needed platform, click Install > Continue >
Finish. Android Studio installs the app on your device and runs it.

• Menambahkan Device di VS Code

Untuk menambahkan pada VS Code dapat dilakukan sbb :
a. Buka VS Code
b. Pada halaman VS Code, di sebelah kanan bawah. Klik pada jumlah device yang terkoneksi dengan
VS Code

13
 c. Pilih device yang akan digunakan

3. MENJALANKAN FLUTTER APPS

Berikut cara agar bisa menjalankan flutter apps pertama yang dibuat berdasarkan template flutter
yang sudah ada :
• VS Code
a. Invoke View > Command Palette.
b. Type “flutter”, and select the Flutter: New Project

c. Select Application

d. Create or select the parent directory for the new project folder

14
e. Enter a project name, such as my_app, and press Enter

f. Wait for project creation to complete and the main.dart file to appear.

g. Tekan F5 untuk mulai running dan debugging. Tunggu sampai konfigurasi selesai. Tampilan yang
keluar akan muncul seperti berikut :

15
 h. Coba lakukan hot reload dengan melakukan modifikasi di kelas MyHomePageState. Setelah
selesai modifikasi pilih save dan perubahan akan muncul di tampilan device.

4. PEMROGRAMAN DART 1
• VARIABEL
Here’s an example of creating a variable and initializing it:

Variables store references. The variable called nama contains a reference to a String object with a
value of “Chiko”.

In the example above, the var keyword is used to declare variables nama, umur, and bb without
explicitly specifying their types. Dart infers the types of these variables based on the assigned values.

16
The $ symbol is used for string interpolation to embed the values of the variables into the string passed
to the print function.

Remember that while using var can make your code shorter and more concise, it's important to use
it judiciously and ensure that the code remains readable and maintainable. In cases where the type
of a variable is not immediately clear from the context, it might be a good practice to provide an
explicit type annotation for better clarity.

The type of the nama variable is inferred to be String, but you can change that type by specifying it. If
an object isn’t restricted to a single type, specify the Object type (or dynamic if necessary).

# FINAL AND CONST

If you never intend to change a variable, use final or const, either instead of var or in addition to a
type. A final variable can be set only once; a const variable is a compile-time constant. (Const
variables are implicitly final.)
Here’s an example of creating and setting a final variable:

You can’t change the value of a final variable:

Use const for variables that you want to be compile-time constants. If the const variable is at the
class level, mark it static const. Where you declare the variable, set the value to a compile-time
constant such as a number or string literal, a const variable, or the result of an arithmetic operation
on constant numbers:

17
 The const keyword isn’t just for declaring constant variables. You can also use it to create constant
values, as well as to declare constructors that create constant values. Any variable can have a
constant value.

• TIPE DATA
The Dart language has special support for the following:
a. Numbers (int, double)
Dart numbers come in two flavors:
✓ Int
Integer values no larger than 64 bits. On native platforms, values can be from -263 to
263 - 1. On the web, integer values are represented as JavaScript numbers (64-bit
floating-point values with no fractional part) and can be from -253 to 253 - 1.
Integers are numbers without a decimal point. Here are some examples of defining integer
literals:

✓ Double
64-bit (double-precision) floating-point numbers, as specified by the IEEE 754
standard.
If a number includes a decimal, it is a double. Here are some examples of defining double
literals:

You can also declare a variable as a num. If you do this, the variable can have both integer and
double values.

b. Strings (String)
A Dart string (String object) holds a sequence of UTF-16 code units. You can use either single or
double quotes to create a string:

You can put the value of an expression inside a string by using ${expression}. If the expression is
an identifier, you can skip the {}.

c. Booleans (bool)
To represent boolean values, Dart has a type named bool. Only two objects have type bool: the
boolean literals true and false, which are both compile-time constants.

18
d. Records ((value1, value2))
e. Lists (List, also known as arrays)
f. Sets (Set)
g. Maps (Map)
h. Runes (Runes; often replaced by the characters API)
i. Symbols (Symbol)
j. The value null (Null)

Because every variable in Dart refers to an object—an instance of a class—you can usually use
constructors to initialize variables. Some of the built-in types have their own constructors. For
example, you can use the Map() constructor to create a map.
Some other types also have special roles in the Dart language:
a. Object: The superclass of all Dart classes except Null.
b. Enum: The superclass of all enums.
c. Future and Stream: Used in asynchrony support.
d. Iterable: Used in for-in loops and in synchronous generator functions.
e. Never: Indicates that an expression can never successfully finish evaluating. Most often used for
functions that always throw an exception.
f. dynamic: Indicates that you want to disable static checking. Usually you should use Object or
Object? instead.
g. void: Indicates that a value is never used. Often used as a return type.

19