【IT】LubuntuにFlutterの環境構築をする

13:56

こんにちは、ともです。

今回はLubuntuにFlutterの環境を構築する手順について投稿します。

Flutterインストール

LubuntuにFlutterをインストールします。インストール方法の詳細はFlutterの公式サイトに記載されています。公式サイトをみればインストールできるのですが個人の備忘録と合わせて手順を記載します。

OS確認

OSを確認します。「Ctrl」+「Alt」+「T」でターミナルコマンドを立ち上げて以下のコマンドを入力します。

  
# cat /etc/os-release

入力すると以下の結果が出力されます。

  
NAME="Ubuntu"
VERSION="20.10 (Groovy Gorilla)"
・・・

私のマシンは上記のとおりです。

Lubuntuはsnapdがインストールされています。Snappyとはカノニカルが設計・開発したソフトウェアデプロイメントシステムかつパッケージ管理システムです。インストールの確認は以下のコマンドで確認できます。

  
# snap --version

以下の通り結果が出力されます。

  
snap    2.48+20.10
snapd   2.48+20.10
series  16
ubuntu  20.10
kernel  5.8.0-36-generi

Flutterをインストールする

Flutterをインストールします。インストールは以下のコマンドで行います。

  
# snap install flutter --classic

インストール後以下のコマンドでパスを表示します。

  
# flutter sdk-path

インストールのパスが表示されます。

Flutter Docterを実行する

Flutter Docterを使って依存関係のあるソフトウェアの確認を行います。以下のコマンドを入力します。

  
# flutter doctor

必要なアプリが入っていない場合は[✗][!]のようにエラーが表示されるため関連するアプリのインストールを行います。

Android Studioのインストール

Android Studioをインストールします。

https://developer.android.com/studio

  
# snap install android-studio --classic

Android Studioのパス設定

パスを設定します。パスの設定は以下の通りです。

  
# flutter config --android-studio-dir="/snap/android-studio/current/android-studio"

Android Studioのプラグイン設定

Android StudionにFlutterとDartのプラグインを設定します。メニューバーの[Settings]-[Plugins]を選択します。検索条件に[Flutter]を入力しますが、結果が表示されないため、[Search in repositories]を選択し再度[Flutter]を入力しインストールを行います。

Flutterのプラグインが解決しませんでした。Flutterのupgradeを行うことで対応しました。upgreadeは以下のとおりです。

  
# flutter channel dev
# flutter upgrade

Licenses設定

ライセンスに同意します。

  
# flutter doctor --android-licenses

deviceの設定

私の環境ではAndroid Studioのエミュレータが動作しないため、実機を使います。CPUがCORE2DUOと昔のCPUのためエミュレーターが動作しませんでした。実機はSONYのXperia XZ（601SO）です。あらかじめ開発者向けオプションの設定を行います。設定後はUSB接続でノートパソコンに接続します。

Visual Studio Codeの設定

エディタをあらかじめインストールします。Android StudioではなくVisual Studio Codeを使用します。インストールはsnapを利用します。

  
# snap install code --classic

Visual Studio CodeでFlutterの設定

Visual Studio CodeのプラグインでFlutterを設定します。メニューバーの[View]-[Command Palette...]を選択し「install」と入力します。[Extensions：Install Extensions]を選択し検索フォームに「Flutter」と入力し該当するプラグインを選択し[install]を押下します。

検証を行います。メニューバーの[View]-[Command Palette...]を選択し「doctor」と入力し、[Flutter：Run FlutterDoctor]を選択します。

Visual Studio Codeでサンプルアプリを動かす

作業用ディレクトリを作成します。以下のコマンドを実行します。

  
# mkdir work
# mkdir 01

新規プロジェクトを作成します。[View]-[Command Palette...]を選択し「flutter」と入力し[Flutter：New ApplicationProject]を選択します。選択後プロ久江区と名を「myapp」と入力します。自動でソースコードが作成されるので待ちます。コードが作成されたらlib/main.dartを選択します。選択後[Run]-[startDebug]を押下します。