【Flutter】開発環境セットアップ

Flutterについて

Flutter は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークである。FlutterはAndroidやiOS向けのアプリケーションの開発に利用されている。

Wikipedia

投稿日2021/04現在での自分の感覚としてはXcodeやAndroid Studioを1つのプロジェクトで作れるのは大変便利だと思います。動作としてはネイティブアプリと遜色ないというのが特徴です!

ネイティブの開発で十分だと満足している人、他のモバイルアプリケーションフレームワークの特徴にメリットを感じている人にはあまりメリットを感じないのが現状です。
しかし、普及していけばライブラリが増えあらゆる分野で使いやすくなる可能性もあります!

個人的にはiOSやAndroidで標準のUIは高速かつ安定でオススメ、3Dグラフィックや独自のアニメーション、ARなどは扱いづらい印象です。
ツールの開発などには最適だと思われます!

Flutterのセットアップ

Flutter公式ページのGet startedに従ってセットアップします。

Flutterの開発環境の選択

Flutterの公式ページのインストールから自分のOSを選択します。
ここでのOSは開発環境です。私の場合はmacOSを選択しました。

Flutterのダウンロード

「Get the Flutter SDK」 からzipファイルをダウンロードし解凍します。
解凍場所は開発用のフォルダを作ってそこに配置するのがおすすめです。

私は書類のFlutterフォルダ以下に解凍しました。

パスの設定

Flutterをダウンロードしたら、パスを設定する必要があります。

パスの設定先を確認

ターミナルでパスの設定先を確認します。
ターミナルは「Launchpad > その他 > ターミナル」から起動できます。
起動後、以下のコマンドを入力してください。

echo $SHELL

「/bin/zsh」の場合は「zsh」を使用しています。
「/bin/bash」の場合は「bash」を使用しています。

zshの場合

zshrcというファイルが存在し、そこにパスが設定されています。
以下のコマンドで編集します。

vim .zshrc

ちなみに実際にファイルとして存在します。

bashの場合

以下のコマンドで編集します。

vim .bash_profile
vimで編集

上のコマンドで下のようなvimというエディターになります。
このエディターにてファイルを変更します。

iキーを押すことでINSERTに切り替わります。
これで入力した文字列を挿入するモードになります。

以下のコードを入力します。

export PATH="$PATH:{flutterフォルダを解凍したディレクトリ}/flutter/bin"

escキーを押してINSERTモードを終了します。
以下のコマンドで上書き保存してvimを終了します。

:wq
パスの確認

これでパスの設定が終わったはずです。
ターミナルの再起動後に反映されます。
再起動後、以下のコマンドでパスが出力されれば成功です。

which flutter
Flutter開発環境の確認

もしFlutterの開発環境に異常がある場合は以下のコマンドを実行してください。
現時点ではAndroidやXcode、Connected deviceにエラーが出ますが、次のエディターのセットアップを行うことで解決します。

flutter doctor

エディターのセットアップ

Flutterはコードエディターを自由に設定できますが、ここではAndroidも開発することを前提にAndroid Studioを使用して開発します。

Android Studioのインストール

Android Studioのサイトからダウンロードします。

プラグインの追加

Android Studio用のFlutterとDart言語のプラグインを追加します。
Android Studioを起動し設定から「Preferences」を選択します。

Pluginsから「Dart」と検索し、DartをInstallしてください。
Dartをインストールしたら「Flutter」もインストールしてください。
インストール後「Apply」を押して「OK」で完了です。

Androidの設定

Android Studioをインストールした時点で設定完了です。

iOSの設定

MacにXcodeというアプリが入っていれば設定完了です。
Windowsでは開発できないので注意してください。

プロジェクトの作成

Android Studioのバージョン次第ではAndroid Studioを起動した時に「Start a new Flutter Project」の項目が出るらしいのですが、私のPCだと出なかったのでコマンドで作成する方法を記載します。

ターミナルの操作

ターミナルを起動し、Flutter開発用に用意したフォルダに移動します。

cd {Flutter開発用に用意したフォルダ}

以下のコマンドでFlutterプロジェクトを作成できます。
今回は「example_project」という名前で作成しました。

flutter create ./{プロジェクト名}

Android Studioで開く

Android Studioを開き、「Open an Existing Project」で作成したプロジェクトを選択します。
ここでは「example_project」のフォルダになります。

以下のような画面が開いていれば成功です。

プロジェクトの実行

Android Studioだと一番上にデバイスの選択と実行ボタンが存在します。
一番左が接続しているデバイスです、再生ボタンで実行、虫のボタンでデバッグです。

デバッグだとブレークポイントを設置して処理を止めることができます。

開発編に関してもいくつか記事を出すと思いますのでよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です