2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Flutter】Flutter環境構築

Posted at

導入

今回はこちらの記事を参考にさせていただきながら、チュートリアル形式で進めていきます。

環境

Ubuntu Server 22.04
Flutter 2.0.1
VSCode 1.104.1

今回、Windows PC から Remote SSH を利用して Ubuntu 環境に接続し、Flutter の環境構築を実施しました。
ただし、実際の開発用途(特にエミュレータを使った動作確認やデバッグ)を考えると、ローカル環境に構築する方が現実的です。

Android エミュレータや iOS シミュレータは、リモート環境では基本的に利用できません。

Linux サーバー上での GUI デバッグは設定が煩雑で、Android Studio などの IDE 機能も制限されます。

Remote SSH は「軽量なコーディング作業」や「CI/CD 用のビルド環境」には便利ですが、日常的なアプリ開発には 直環境での構築 が推奨されます。

Flutterのインストール

wget -O ~/Downloads/flutter_linux_2.0.1-stable.tar.xz https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_2.0.1-stable.tar.xz

tar -xf ~/Downloads/flutter_linux_2.0.1-stable.tar.xz -C .

環境パスの設定

~/.bashrcにパスを追加します。

$ vi ~/.bashrc

export PATH="$PATH:~/development/flutter/bin"

環境パスを更新

$ source ~/.bashrc

パスの確認

$ flutter --version
Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c5a4b4029c (4 years, 7 months ago) • 2021-03-04 09:47:48 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

ビルド環境作成

必要なものをインストール

$ sudo apt install clang curl pkg-config ninja-build cmake libgtk-3-dev libblkid-dev liblzma-dev unzip

ビルドターゲットをLinuxにする

$ flutter config --enable-linux-desktop

環境のチェックを行う

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.1, on Linux, locale en_US.UTF-8)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the
      Android SDK components.
      (or visit
      https://flutter.dev/docs/get-started/install/linux#android-
      setup for detailed instructions).
      If the Android SDK has been installed to a custom location,
      please use
      `flutter config --android-sdk` to update to that location.

[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (not installed)
[✓] Connected device (2 available)

! Doctor found issues in 2 categories.

プロジェクト作成・実行

プロジェクトを作成

$ mkdir flutter_tutorial
$ cd flutter_tutorial
$ flutter create .

プロジェクト名には命名規則があります。

拡張機能 Flutter のインストール

今回使用しているFlutterバージョンが最新バージョンでは対応されていなかったので、過去バージョンを選択してインストールしました。

「特定のバージョンをインストール」 --> 「3.20.0」を選択
image.png

実行

以下のコマンドで実行

$ flutter run -d linux
Launching lib/main.dart on Linux in debug mode...
Building Linux application...                                           

(flutter_tutorial:37870): Gtk-WARNING **: 12:59:42.058: cannot open display: 
Error waiting for a debug connection: The log reader stopped unexpectedly.
Error launching application on Linux.

今回、UBuntu Serverを使用していたため、GUI前提の実行ができませんでした。

以下、web-serverでの実行は確認できました。

$ flutter run -d web-server
Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         16.6s
lib/main.dart is being served at http://localhost:37813
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the
Chrome or Edge devices for an improved development workflow.

🔥  To hot restart changes while running, press "r" or "R".

リリースビルド

リリースビルドは可能でした。

$ flutter build linux

Building without sound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety

Building Linux application...  

linuxの部分は以下のレパートリーがあります。

  • apk(Android アプリ)
  • appbundle(Google Play 向け Android App Bundle)
  • ios(iOS アプリ, 要 macOS + Xcode)
  • ipa(iOS アプリの ipa ファイル出力, 要 macOS)
  • macos(macOS アプリ, 要 macOS)
  • windows(Windows デスクトップアプリ, 要 Windows)
  • linux(Linux デスクトップアプリ, 要 Linux)
  • web(Web アプリ, 要 Flutter web 環境)

以下のコマンドで使用可能なデバイスを取得できます。

$ flutter devices
2 connected devices:

Linux (desktop) • linux  • linux-x64      • Linux
Chrome (web)    • chrome • web-javascript • Google Chrome 140.0.7339.185

GUI前提となる場合、Ubuntu Serverでは直接実行ができないため、
flutter run -d web-server で Webサーバーモードで起動することで確認できました。

まとめ

Remote SSHで実施したため、少々複雑になりましたが
それでも比較的シンプルな環境構築だと思いました。
次回の画面作成編に続きます。

参考

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?