Flutter開発環境のインストール

モバイルアプリの開発フレームワーク。デスクトップおよびウェブも対応。

今、Google Play Store に新しい Android SDK を使用してアプリを更新する必要がありますので、数年前に書いた古いハウツーを磨き上げ、公開します。

Google PlayStore ページの Logical Fallacy Detector アプリのスクリーンショット

PlayStore アプリページからの抜粋です。

このハウツーは、2022年8月に最初に書かれ、2024年4月に更新・公開されました。そのため、いくつかの古い情報が含まれている可能性があります。

手順

Linux PC に Flutter をインストールする手順

開発ツールのインストール

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

ツールの確認

which bash file mkdir rm which

パッケージのインストール

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

Android アプリ開発用のパッケージのインストール

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

Linux アプリ開発用のパッケージのインストール

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

VSCode のインストール

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

Linux 用の VSCode デビアンパッケージをダウンロードするリンクがあります: https://go.microsoft.com/fwlink/?LinkID=760868

次のようにインストールします:

sudo apt install ./<file>.deb

# 古い Linux ディストリビューションを使用している場合は、以下のコマンドを実行してください:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # 依存関係のインストール

“setup/linux” のページにも他の Linux ディストリビューションがあります。

VSCode 用の Flutter 拡張機能をインストール: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

VS Code のクイックオープン（Ctrl+P）を開き、以下のコマンドを貼り付け、Enter キーを押してください。

ext install Dart-Code.flutter

Chrome のインストール

ウェブ開発用に Chrome をインストールしてください:

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

Android Studio のインストール

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

Ubuntu 64 ビットでの必要なライブラリ

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

Ubuntu 24.04 ベースの OS では:

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

最新バージョンの Android Studio を以下の URL からダウンロードしてください: https://developer.android.com/studio

“{installation home}/bin” に移動し、以下のコマンドを実行してください:

./studio.sh

xed ~/.bash_profile

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

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

出力が 1 以上の場合、仮想化がサポートされています。出力が 0 の場合は、CPU がハードウェア仮想化をサポートしていない可能性があります。

期待される出力:

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

Linux 上で KVM をインストールするには、以下のコマンドを使用してください:

Cosmic (18.10) またはそれ以降:

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

Flutter SDK のインストール

SDK のインストール: https://docs.flutter.dev/get-started/install/linux

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

手動でインストールするか、VSCode を使用してインストールできます。

手動インストールの注意点:

download 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

VSCode の注意点:

VS Code のコマンド（Ctrl+p）で:

ext install Dart-Code.flutter

コマンドパレット（Ctrl+Shift+p）で、“flutter” を入力します。

“Flutter: New Project” を選択します。

VS Code は、コンピュータ上の Flutter SDK の場所を指定するように促します。

Flutter SDK がインストールされている場合は、“Locate SDK” をクリックします。

Flutter SDK がインストールされていない場合は、“Download SDK” をクリックします。

このオプションは、開発ツールの前提条件に従って Git をインストールしていない場合、Flutter のインストールページにリダイレクトします。

“Which Flutter template?” と聞かれた場合は、無視してください。Esc キーを押してください。開発環境を確認した後、テストプロジェクトを作成できます。

~/Apps にインストールした後:

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

source ~/.bash_profile

テレメトリの報告を無効にするには、以下のターミナルコマンドを実行してください:

dart --disable-analytics

Android Studio のインストール

“{installation home}/bin” に移動し、以下のコマンドを実行してください:

./studio.sh

xed ~/.bash_profile

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

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

VS Code を起動します。
ビュー > コマンドパレット… を選択します。
「install」と入力し、拡張機能: 拡張機能のインストールを選択します。
拡張機能検索フィールドに「flutter」と入力し、リストから Flutter を選択し、インストールします。これにより、必要な Dart プラグインもインストールされます。
ビュー > コマンドパレット（Ctrl+Shift+P）を起動します。
「doctor」と入力し、Flutter: Flutter Doctor を実行します。（またはターミナルウィンドウで flutter doctor を実行します）
出力パネルで問題を確認してください。異なる出力オプションで Flutter をドロップダウンから選択してください。

チェックアップ

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"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ 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.
[✗] 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

cmdline-tools のインストール:

Android Studio を開き、
SDK（もっと見る）に移動し、
Android SDK cmdline-tools latest をチェックし、
Apply をクリックします

ライセンスの承認

flutter doctor --android-licenses

Chromium を使用している場合:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

Flutter のバージョンの確認とアップグレード

Flutter バージョンの確認:

flutter --version

Flutter のバージョンをアップグレードするには、以下のコマンドを実行してください:

flutter upgrade

新しい Flutter プロジェクトの作成

ビュー > コマンドパレット（Ctrl+Shift+P）を起動します。
「flutter」と入力し、「Flutter: New Project」を選択します。
アプリケーションを選択します。
新しいプロジェクトフォルダの親ディレクトリを作成または選択します。
プロジェクト名（例: my_app）を入力し、Enter キーを押します。
プロジェクト作成が完了し、main.dart ファイルが表示されるのを待ちます。

Flutter でのデバッグ

ctrl+p

>flutter: select device

ロギング

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),
  );
}

ブレイクポイント


import 'dart:developer';

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

デバイスへのデプロイ

アプリの APK を作成し、以下のコマンドを試してください

プロジェクトをクリーンアップ

flutter clean

パッケージを取得

flutter pub get

APK をビルド

flutter build apk --release

あなたのマシンで APK を見つけてください

プロジェクト名\build\app\outputs\flutter-apk（リリースモード）

この APK をコピーし、モバイルデバイスにインストールしてください

Dart でのスリープ

非同期コード内

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

同期コード内

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

有用なリンク

有用なパッケージ

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

VSCode 拡張機能

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

アイコン: https://api.flutter.dev/flutter/material/Icons-class.html

すべてのアイコン: https://fonts.google.com/icons?selected=Material+Icons

==== インターネットからデータを取得 ====

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

Android アプリのビルドとリリースに関連するもの

https://docs.flutter.dev/deployment/android

Web Flutter アプリ

ビルド: https://docs.flutter.dev/platform-integration/web/building
異なる環境へのデプロイ: https://docs.flutter.dev/deployment

VSCode Live Server プラグイン

手順

開発ツールのインストール

VSCode のインストール

Chrome のインストール

Android Studio のインストール

KVM 加速モードの有効化

Flutter SDK のインストール

Android Studio のインストール

チェックアップ

Flutter のバージョンの確認とアップグレード

新しい Flutter プロジェクトの作成

Flutter でのデバッグ

ロギング

ブレイクポイント

デバイスへのデプロイ

Dart でのスリープ

有用なリンク

有用なパッケージ

VSCode 拡張機能

Android アプリのビルドとリリースに関連するもの

Web Flutter アプリ

Flutter とバックエンドの連携