##はじめに
全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