はじめに

全3回に分けFlutterでLinuxのGUIアプリを作成する手順をまとめています。
開発環境はVScodeを使用し、タイマーアプリを作成します。

第一回　環境構築編(今回はここ)
第二回　画面作成編
第三回　完成編

今回はFlutterのインストールからサンプルアプリの実行までの記事です。

Flutterを初めて数日の完全初心者が記事を書いていますので、間違いがありましたらご指摘・コメントいただけると助かります。

環境

Ubuntu(18.04.1)
Flutter(2.0.1)
VScode(1.42.1) 導入済み

1.Flutterのインストール

基本的に公式の方法を参考に進めていきます。

https://flutter.dev/docs/get-started/install/linux
からFlutter SDKをダウンロードします。

ダウンロードしたものを展開します。
Flutterのバージョンはダウンロードしたものに合わせてください。

$ mkdir  ~/development
$ tar xf ./flutter_linux_2.0.1-stable.tar.xz -C ~/development

環境パス

~/.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 (2 days ago) • 2021-03-04 09:47:48 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

2.ビルド環境作成

アプリを作成するのに必要なものをインストールします。

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

FlutterのビルドターゲットをLinuxにします。

$ flutter config --enable-linux-desktop

環境に問題ないかを以下のコマンドで確認できます。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.1, on Linux, locale ja_JP.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 (Cannot find Chrome executable at
    google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop
[!] Android Studio (not installed)
[✓] VS Code (version 1.42.1)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

3.プロジェクトの作成・実行

プロジェクトを作成します。

$ mkdir app
$ cd app
$ flutter create .

appがプロジェクト名です。プロジェクト名によっては、以下のようなエラーになります。
その場合は、名前を変えてください。(原因がよくわからないのでわかる方は教えていただけると助かります。)

"XXXXXX" is not a valid Dart package name.
See https://dart.dev/tools/pub/pubspec#name for more information.

作成したプロジェクトをVScodeで開くと以下のようになります。

VScodeの設定[オプション]

Flutterの拡張機能があるので、VScodeにインストールします。

実行

以下のコマンドで実行します。

$ flutter run -d linux

Flutterにはホットリロードという機能があり、実行中にソースコードを変更・保存した後、ターミナル上でrを行うことで即座に変更した内容が画面に反映されます。

リリースビルド

$ flutter build linux

build/linux/release/bundle/に出力されます。

終わりに

思ったよりも簡単に環境を作成できました。
次回からUIまわりの作成に入りますので、よければぜひ読んでください。

最後まで読んで下さりありがとうございました。
次回またお会いしましょう。

参考

Flutter公式サイト
 [Flutter] デスクトップ環境構築 for Linux
Flutter入門[環境構築〜Todoアプリ]L