Pasang lingkungan pengembangan Flutter

Rangkaian kerja untuk pengembangan aplikasi mobile. Desktop dan web juga.

Konten Halaman

Sekarang saya perlu memperbarui aplikasi di Google Play Store untuk menggunakan SDK Android terbaru, jadi saya memoles dan mempublikasikan panduan lama yang saya tulis beberapa tahun yang lalu.

Screenshot halaman Google PlayStore aplikasi Logical Fallacy Detector

Potongan dari halaman aplikasi PlayStore.

Panduan ini awalnya ditulis pada Agustus 2022, diperbarui dan dipublikasikan pada April 2024. Karena itu, mungkin mengandung beberapa informasi lama.

Cara Melakukannya

Langkah-langkah untuk menginstal Flutter ke PC Linux

Instal alat pengembangan

https://docs.flutter.dev/get-started/install/linux/android

Periksa alat

which bash file mkdir rm which

Instal paket

sudo apt-get update -y && sudo apt-get upgrade -y;
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

Instal paket untuk pengembangan aplikasi Android

sudo apt-get install \
    libc6:i386 libncurses5:i386 \
    libstdc++6:i386 lib32z1 \
    libbz2-1.0:i386

Instal paket untuk pengembangan aplikasi Linux

sudo apt-get install \
      clang cmake git \
      ninja-build pkg-config \
      libgtk-3-dev liblzma-dev \
      libstdc++-12-dev

Instal VSCode

https://code.visualstudio.com/docs/setup/linux

Ada tautan yang tersedia untuk mengunduh paket Debian VSCode untuk Linux: https://go.microsoft.com/fwlink/?LinkID=760868

Kemudian instal seperti:

sudo apt install ./<file>.deb

# Jika Anda menggunakan distribusi Linux yang lebih tua, Anda perlu menjalankan perintah berikut:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # Instal dependensi

Distro Linux lainnya juga tersedia di halaman “setup/linux”.

Instal ekstensi Flutter untuk VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Luncurkan VS Code Quick Open (Ctrl+P), tempelkan perintah berikut, dan tekan enter.

ext install Dart-Code.flutter

Instal Chrome

Untuk pengembangan web - Instal Chrome:

https://www.google.com/chrome/dr/download/

Instal Android Studio

https://developer.android.com/studio/install#linux

Perpustakaan yang diperlukan untuk Ubuntu 64-bit:

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

pada OS berbasis Ubuntu 24.04:

sudo apt-get install libc6:i386 libncurses6:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

Unduh versi terbaru dari studio dari: https://developer.android.com/studio

cd ke “{home instalasi}/bin” dan ketik:

./studio.sh

xed ~/.bash_profile

export PATH=$PATH:~/Apps/android-studio/bin

Aktifkan mode akselerasi KVM

https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux

sudo apt-get install cpu-checker
egrep -c '(vmx|svm)' /proc/cpuinfo

Keluaran dari 1 atau lebih tinggi berarti bahwa virtualisasi didukung. Keluaran dari 0 berarti bahwa CPU Anda tidak mendukung virtualisasi perangkat keras.

Keluaran yang diharapkan:

INFO: /dev/kvm exists
KVM acceleration can be used

Instal KVM di Linux Gunakan perintah berikut untuk menginstal KVM:

Cosmic (18.10) atau yang lebih baru:

sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils

Instal SDK Flutter

instal sdk https://docs.flutter.dev/get-started/install/linux

https://docs.flutter.dev/get-started/install/linux/android

Bisa menginstal sdk secara manual atau melalui VSCode

Catatan manual:

unduh https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

cd prj

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

export PATH=$PATH:~/prj/flutter/bin

which flutter

flutter precache

flutter config --no-analytics

flutter config

Catatan VSCode:

di vs code command (Ctrl+p)

ext install Dart-Code.flutter

Di Command Palette ((Ctrl+shift+p)), ketik flutter.

Pilih Flutter: New Project.

VS Code meminta Anda untuk menentukan lokasi SDK Flutter di komputer Anda.

Jika Anda sudah menginstal SDK Flutter, klik Locate SDK.

Jika Anda belum menginstal SDK Flutter, klik Download SDK.

Opsi ini mengarahkan Anda ke halaman instalasi Flutter jika Anda belum menginstal Git seperti yang diarahkan dalam prasyarat alat pengembangan.

Ketika diminta “Which Flutter template?”, abaikan saja. Tekan Esc. Anda dapat membuat proyek uji setelah memeriksa setup pengembangan Anda.

Setelah menginstal ke ~/Apps

echo 'export PATH="~/Apps/flutter/bin:$PATH"' >> ~/.bash_profile

source ~/.bash_profile

Untuk menonaktifkan pelaporan analitik, jalankan perintah terminal berikut:

dart --disable-analytics

Instal Android Studio

cd ke “{home instalasi}/bin” dan ketik:

./studio.sh

xed ~/.bash_profile

export PATH=$PATH:/home/yourname/Apps/android-studio/bin

https://docs.flutter.dev/get-started/editor

  • Buka VS Code.

  • Aktifkan View > Command Palette….

  • Ketik “install”, dan pilih Extensions: Install Extensions.

  • Ketik “flutter” di bidang pencarian ekstensi, pilih Flutter dari daftar, dan klik Install. Ini juga menginstal plugin Dart yang diperlukan.

  • Aktifkan View > Command Palette (Ctrl+Shift+P)

  • Ketik “doctor”, dan pilih Flutter: Run Flutter Doctor. (atau jalankan flutter doctor di jendela terminal)

  • Periksa output di panel OUTPUT untuk masalah apa pun. Pastikan untuk memilih Flutter dari dropdown di opsi output yang berbeda.

Pemeriksaan

flutter doctor

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      Lihat https://developer.android.com/studio/command-line untuk detail lebih lanjut.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` untuk menerima lisensi SDK.
      Lihat https://flutter.dev/docs/get-started/install/linux#android-setup untuk detail lebih lanjut.
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop

Untuk menginstal cmdline-tools:

  • Buka Android Studio,
  • lalu SDK (di lebih lanjut),
  • centang Android SDK cmdline-tools terbaru,
  • klik Apply

Menerima lisensi

flutter doctor --android-licenses

Jika menggunakan chromium:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Memeriksa Versi Flutter dan Memperbarui

Pemeriksaan versi Flutter:

flutter --version

Untuk memperbarui versi Flutter jalankan

flutter upgrade

Membuat Proyek Flutter Baru

  • Aktifkan View > Command Palette (Ctrl+Shift+P).
  • Ketik “flutter”, dan pilih Flutter: New Project.
  • Pilih Aplikasi.
  • Buat atau pilih direktori induk untuk folder proyek baru.
  • Masukkan nama proyek, seperti my_app, dan tekan Enter.
  • Tunggu hingga pembuatan proyek selesai dan file main.dart muncul.

Debugging di Flutter

ctrl+p

>flutter: select device

Logging

https://docs.flutter.dev/testing/code-debugging#logging

stderr.writeln(‘print me’);

import 'dart:developer' as developer;

void main() {
  developer.log('log me', name: 'my.app.category');

  developer.log('log me 1', name: 'my.other.category');
  developer.log('log me 2', name: 'my.other.category');
}
---
import 'dart:convert';
import 'dart:developer' as developer;

void main() {
  var myCustomObject = MyCustomObject();

  developer.log(
    'log me',
    name: 'my.app.category',
    error: jsonEncode(myCustomObject),
  );
}

Titik Pemecah (Breakpoints)

import 'dart:developer';

void someFunction(double offset) { debugger(when: offset > 30.0); // … }

Mengirimkan ke perangkat

Buat apk untuk aplikasi Anda dan coba perintah berikut

bersihkan proyek Anda

flutter clean

dapatkan paket

flutter pub get

bangun apk Anda

flutter build apk --release

cari apk Anda di mesin Anda

nama proyek Anda\build\app\outputs\flutter-apk(pada mode rilis)

salin APK ini dan instal ke perangkat seluler Anda

Tidur dalam Dart

Dalam kode Async

  await Future.delayed(Duration(seconds: 1));

Dalam kode Sync

  import 'dart:io';
  sleep(Duration(seconds:1));

Tautan yang Berguna

Paket yang Berguna

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

Ekstensi VSCode

https://medium.com/codex/my-top-5-flutter-extensions-for-vs-code-f36936518ff8

ikon: https://api.flutter.dev/flutter/material/Icons-class.html

semua ikon: https://fonts.google.com/icons?selected=Material+Icons

==== Mengambil data dari internet ====

https://docs.flutter.dev/cookbook/networking/authenticated-requests

Terkait: Membangun dan merilis aplikasi Android

Aplikasi Flutter Web

Plugin Live Server VSCode

Flutter dengan backend