Zimera Corporation

Flutter: Persiapan Lingkungan Pengembangan

Posted in: Software Engineering  
Tags: Dart   Flutter   Mobile   Web   Development Environment  
Author: | | 9 minutes reading time

Flutter adalah software framework yang digunakan untuk membangun native mobile app. Jika biasanya pemrogram membangun peranti khusus dari OS mobile yang berbeda-beda (Java/Kotlin/Scala untuk Android, Objective C/Swift untuk iOS), kali ini Flutter dimaksudkan untuk membangun aplikasi untuk 3 platform yang berbeda: Android, iOS, dan Fuchsia (belum rilis) dengan satu codebase yang sama. Tentu saja yang dikerjakan oleh Flutter ini bukan hal yang pertama kali, sebelumnya sudah ada React Native, NativeScript, maupun LambdaNative. Flutter sudah mencapai versi stabil pada bulan Desember 2018. Saat ini (2023), Flutter sudah berada pada versi 3.7.1.

Secara umum, untuk menggunakan Flutter, ada beberapa hal yang harus disiapkan:

  1. Android SDK atau Android Studio - jika ingin membuat aplikasi Android menggunakan Flutter. Peranti ini juga harus memenuhi syarat instalasi komponen-komponennya.
  2. Flutter SDK. Tidak perlu install Dart secara terpisah karena Flutter sudah menyertakan Dart stable.
  3. Konfigurasi localhost (127.0.0.1).
  4. Device / Emulator
  5. IDE atau editor teks biasa (plugin tersedia untuk Android Studio dan Visual Studio Code).

Mari kita siapkan satu persatu.

Android SDK

Kami memilih menggunakan versi command line karena Android Studio terlalu berat untuk mesin kami. Unduh command line tools dari URL unduh Android Studio. Setelah itu, ekstrak di direktori $HOME/Android/Sdk/cmdline-tools/latest (direktori ini default ditentukan oleh Android SDK). Setelah itu, atur path (bisa juga simpan ke file supaya bisa di-source, kami menggunakan fish shell):

set -x ANDROID_SDK_ROOT /home/bpdp/Android/Sdk
set -x PATH /home/bpdp/Android/Sdk/cmdline-tools/latest/bin $ANDROID_SDK_ROOT/tools/bin $ANDROID_SDK_ROOT/platform-tools $ANDROID_SDK_ROOT/emulator $ANDROID_SDK_ROOT/build-tools/28.0.3 $PATH

Setelah itu, install berbagai paket yang diperlukan menggunakan perintah sdkmanager --install namapaket. Paket yang kami install:

$ sdkmanager --list_installed
[=======================================] 100% Fetch remote repository...       
Installed packages:
  Path                                                  | Version | Description                                | Location                                             
  -------                                               | ------- | -------                                    | -------                                              
  build-tools;23.0.3                                    | 23.0.3  | Android SDK Build-Tools 23.0.3             | build-tools/23.0.3                                   
  build-tools;27.0.3                                    | 27.0.3  | Android SDK Build-Tools 27.0.3             | build-tools/27.0.3                                   
  build-tools;28.0.3                                    | 28.0.3  | Android SDK Build-Tools 28.0.3             | build-tools/28.0.3                                   
  build-tools;33.0.2                                    | 33.0.2  | Android SDK Build-Tools 33.0.2             | build-tools/33.0.2                                   
  emulator                                              | 32.1.11 | Android Emulator                           | emulator                                             
  extras;google;auto                                    | 2.0     | Android Auto Desktop Head Unit Emulator    | extras/google/auto                                   
  patcher;v4                                            | 1       | SDK Patch Applier v4                       | patcher/v4                                           
  platform-tools                                        | 33.0.3  | Android SDK Platform-Tools                 | platform-tools                                       
  platforms;android-23                                  | 3       | Android SDK Platform 23                    | platforms/android-23                                 
  platforms;android-27                                  | 3       | Android SDK Platform 27                    | platforms/android-27                                 
  platforms;android-28                                  | 6       | Android SDK Platform 28                    | platforms/android-28                                 
  platforms;android-33                                  | 2       | Android SDK Platform 33                    | platforms/android-33                                 
  system-images;android-23;google_apis;x86_64           | 33      | Google APIs Intel x86 Atom_64 System Image | system-images/android-23/google_apis/x86_64          
  system-images;android-27;default;x86_64               | 1       | Intel x86 Atom_64 System Image             | system-images/android-27/default/x86_64              
  system-images;android-28;default;x86_64               | 4       | Intel x86 Atom_64 System Image             | system-images/android-28/default/x86_64              
  system-images;android-28;google_apis_playstore;x86_64 | 8       | Google Play Intel x86 Atom_64 System Image | system-images/android-28/google_apis_playstore/x86_64

Nama paket:

build-tools;23.0.3
build-tools;27.0.3
build-tools;28.0.3
build-tools;33.0.2
emulator
extras;google;auto
patcher;v4
platform-tools
platforms;android-23
platforms;android-27
platforms;android-28
platforms;android-33
system-images;android-23;google_apis;x86_64
system-images;android-27;default;x86_64
system-images;android-28;default;x86_64
system-images;android-28;google_apis_playstore;x86_64

Setelah itu membuat emulator dengan perintah berikut:

$ avdmanager create avd --force --name Nexus6P --abi google_apis/x86_64 --package 'system-images;android-23;google_apis;x86_64' --device "Nexus 6P"

Tentu saja anda bisa membuat emulator lainnya juga selain Nexus 6P.

Install Flutter

Setelah itu, Flutter diinstall. Instalasi Flutter sangat mudah, hanya perlu mengekstrak dan kemudian menambahkan direktori bin/ pada distribusi Flutter ke dalam variable lingkungan PATH.

set -x PATH $HOME/software/dart-dev-tools/flutter/bin $PATH

Untuk memeriksa apakah sudah terinstall dengan benar serta Android SDK sudah sesuai atau belum, gunakan argumen doctor, biasanya pada saat pertama kali dijalankan akan muncul masalah license:

...
...
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /home/bpdp/Android/Sdk
    • Platform android-33, build-tools 33.0.2
    • ANDROID_SDK_ROOT = /home/bpdp/Android/Sdk
    • Java binary at: /home/bpdp/software/android-dev-tools/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
...
...

Accept lisensi dari Android dengan perintah berikut:

$ flutter doctor --android-licenses
[=======================================] 100% Computing updates...             
4 of 6 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y

1/4: License android-googletv-license:
...
...
...
Accept? (y/N): y
All SDK package licenses accepted
$

Berikut adalah hasil jika semua telah terinstall dengan benar.

$ flutter doctor -v
[✓] Flutter (Channel stable, 3.7.1, on Devuan GNU/Linux 5 (daedalus/ceres) 5.18.0-4-amd64, locale en_US.UTF-8)
    • Flutter version 3.7.1 on channel stable at /home/bpdp/software/dart-dev-tools/flutter-3.7.1
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7048ed95a5 (8 days ago), 2023-02-01 09:07:31 -0800
    • Engine revision 800594f1f4
    • Dart version 2.19.1
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /home/bpdp/Android/Sdk
    • Platform android-33, build-tools 33.0.2
    • ANDROID_SDK_ROOT = /home/bpdp/Android/Sdk
    • Java binary at: /home/bpdp/software/java-dev-tools/jdk/oracle/jdk11/bin/java
    • Java version Java(TM) SE Runtime Environment 18.9 (build 11.0.18+9-LTS-195)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Debian clang version 14.0.6
    • cmake version 3.25.1
    • ninja version 1.11.1
    • pkg-config version 1.8.1

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] Connected device (3 available)
    • Android SDK built for x86 64 (mobile) • emulator-5554 • android-x64    • Android 6.0 (API 23) (emulator)
    • Linux (desktop)                       • linux         • linux-x64      • Devuan GNU/Linux 5 (daedalus/ceres) 5.18.0-4-amd64
    • Chrome (web)                          • chrome        • web-javascript • Google Chrome 110.0.5481.77

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.
$

Catatan: Jika ingin menggunakan Flutter untuk Web, kita juga harus install Google Chrome.

Konfigurasi Loopback

Sebagai superuser:

$ sudo ifconfig lo up
[sudo] password for bpdp: 
$ sudo ifconfig
lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet 127.0.0.1  netmask 255.0.0.0
        inet6 ::1  prefixlen 128  scopeid 0x10<host>
        loop  txqueuelen 1000  (Local Loopback)
        RX packets 3028  bytes 390084 (380.9 KiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 3028  bytes 390084 (380.9 KiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0
...
...
$

Konfigurasi ini diperlukan supaya tidak terjadi error saat menjalankan emulator.

emulator: ERROR: It seems too many emulator instances are running on this machine. Aborting.

Jika berhasil, maka emulator akan berjalan dengan baik seperti ini:

$ emulator -avd Nexus6P
INFO    | Android emulator version 32.1.11.0 (build_id 9536276) (CL:N/A)
INFO    | Found systemPath /home/bpdp/Android/Sdk/system-images/android-23/google_apis/x86_64/
INFO    | Storing crashdata in: /tmp/android-bpdp/emu-crash.db, detection is enabled
INFO    | Duplicate loglines will be removed, if you wish to see each indiviudal line launch with the -log-nofilter flag.
ERROR   | Failed to retrieve DNS servers list from the system
WARNING | Cannot find system DNS servers! Name resolution will be disabled.
Fontconfig warning: "/usr/share/fontconfig/conf.avail/05-reset-dirs-sample.conf", line 6: unknown element "reset-dirs"
WARNING | cannot add library /home/bpdp/Android/Sdk/emulator/qemu/linux-x86_64/lib64/vulkan/libvulkan.so: failed
INFO    | added library /home/bpdp/Android/Sdk/emulator/lib64/vulkan/libvulkan.so
WARNING | *** No gRPC protection active, consider launching with the -grpc-use-jwt flag.***
INFO    | Started GRPC server at 127.0.0.1:8554, security: Local, auth: none
INFO    | Advertising in: /run/user/1000/avd/running/pid_16533.ini
INFO    | Setting display: 0 configuration to: 1440x2560, dpi: 560x560 
INFO    | Info: Sandboxing disabled by user. ((null):0, (null))
INFO    | Critical: Failed to load https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true: The 'Access-Control-Allow-Origin' header has a value 'qrc://' that is not equal to the supplied origin. Origin 'qrc://' is therefore not allowed access. (qrc:/html/location-point.html:0, (null))
INFO    | Deleting snapshot default_boot
INFO    | Critical: Failed to load https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true: The 'Access-Control-Allow-Origin' header has a value 'qrc://' that is not equal to the supplied origin. Origin 'qrc://' is therefore not allowed access. (qrc:/html/location-point.html:0, (null))

Tampilannya adalah sebagai berikut:

Emulator Nexus6P

IDE atau Editor Teks

Untuk IDE, bisa menggunakan Android Studio maupun Visual Studio Code. Keduanya mempunyai plugin untuk Flutter. Jika menggunakan editor biasa, gunakan plugin untuk menulis source code menggunakan Dart. Sebagai contoh, jika menggunakan Vim, gunakan dart-vim. Kami menggunakan SpaceVim sehingga setting bisa dilakukan dengan mengaktifkan lang#dart.

Mencoba Flutter untuk Android

Jika sudah siap, kita bisa mencoba dengan menggunakan langkah-langkah berikut ini, dimulai dari inisialisasi - membuat kerangka aplikasi (hello):

$ flutter create hello
Creating project hello...
Running "flutter pub get" in hello...
Resolving dependencies in hello... (3.5s)
+ async 2.10.0
+ boolean_selector 2.1.1
+ characters 1.2.1
+ clock 1.1.1
+ collection 1.17.0 (1.17.1 available)
+ cupertino_icons 1.0.5
+ fake_async 1.3.1
+ flutter 0.0.0 from sdk flutter
+ flutter_lints 2.0.1
+ flutter_test 0.0.0 from sdk flutter
+ js 0.6.5 (0.6.7 available)
+ lints 2.0.1
+ matcher 0.12.13 (0.12.14 available)
+ material_color_utilities 0.2.0
+ meta 1.8.0 (1.9.0 available)
+ path 1.8.2 (1.8.3 available)
+ sky_engine 0.0.99 from sdk flutter
+ source_span 1.9.1
+ stack_trace 1.11.0
+ stream_channel 2.1.1
+ string_scanner 1.2.0
+ term_glyph 1.2.1
+ test_api 0.4.16 (0.4.18 available)
+ vector_math 2.1.4
Changed 24 dependencies in hello!
Wrote 127 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd hello
  $ flutter run

Your application code is in hello/lib/main.dart.
$

Setelah itu, jalankan emulator.

emulator -avd Nexus6P

Jalankan program hello (direktori yang aktif adalah direktori hello sesuai nama aplikasi yang kita inisialisasi) :

$ cd hello
$ flutter run
Using hardware rendering with device Android SDK built for x86 64. If you notice graphics artifacts, consider enabling software rendering with
"--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 64 in debug mode...
Checking the license for package Android SDK Build-Tools 30.0.3 in /home/bpdp/Android/Sdk/licenses
License for package Android SDK Build-Tools 30.0.3 accepted.
Preparing "Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)".
"Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" ready.
Installing Android SDK Build-Tools 30.0.3 in /home/bpdp/Android/Sdk/build-tools/30.0.3
"Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" complete.
"Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" finished.
Running Gradle task 'assembleDebug'...                            227.8s
✓  Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app-debug.apk...          25.2s
I/Choreographer( 3224): Skipped 67 frames!  The application may be doing too much work on its main thread.
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
E/eglCodecCommon( 3224): glUtilsParamSize: unknow param 0x00008741
Syncing files to device Android SDK built for x86 64...            22.2s

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on Android SDK built for x86 64 is available at: http://127.0.0.1:41669/pL0RSUz5FiM=/
The Flutter DevTools debugger and profiler on Android SDK built for x86 64 is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:41669/pL0RSUz5FiM=/

Setelah gradle diaktifkan untuk mengambil berbagai dependencies (karena menggunakan Android), akan muncul tampilan di emulator.

Emulator Nexus6P

Selamat mencoba!

Zimera Corporation

Powered by Hugo, theme by www.zerostatic.io, image: Freepik