はじめに
初めましてmasaです。
Androidのプラットフォームエンジニアをやってます。
最近端末を作る仕事も減ってきたので別の技術に手を出してみようかと思い、目についたFlutterの勉強をしてみました。
本投稿は勉強した内容の備忘録となります。
基本的に下記のインストールガイドに従い進めていきます。
Flutter MacOS install
環境
MacBook Pro 2018
macOS Mojave 10.14.5
Xcode 10.2.1
Android Studio 3.4.2
目次
1.Flutter SDKのインストール
2.Flutter doctorの実行
3.アプリの作成
4.iOSのアプリ起動
5.Androidのアプリ起動
Flutter SDKのインストール
インストールガイドに従いFlutter SDKのzipを取得し任意の場所に展開します。
その後展開した場所をPATHに追加します。
私の場合は下記を.bashrc等に記載してターミナル起動時にパスが通るようにしてます。
export PATH=$PATH:Flutter SDKを展開したディレクトリ/bin
下記のコマンドでバージョンが表示されればパスが通っています。
$ flutter --version
インストールガイドにあるflutter precacheはネットワークが途切れるような環境でないため実行しませんでした。
Flutter doctorの実行
インストール後はflutter doctorというコマンドを使用し、必要なツールや設定を行なっていきます。
最終的には下記まで設定したところエミュレータでアプリを動かすことはできました。
iOS toolsは実機でアプリを動かす際に必要なツール類だったので今回は入れてません。
またエディタに関するアドオンも入れてません。
アプリの作成
任意のディレクトリで下記のコマンドを実行します。
my_appはアプリ名なので任意の名前でも大丈夫です。
$ flutter create my_app
コマンド実行後はmy_appディレクトリが作成されその中にプロジェクト一式が作成された状態になります。
iOSのアプリ起動
インストールガイドに従い下記のコマンドを実行します。
Xcodeは一つしか入れてないのでxcode-selectは実行してません。
複数バージョンを入れている方はxcode-selectで使用するXcodeを選択する必要があるようです。
$ sudo xcodebuild -license
アプリを動かすため下記のコマンドでシミュレータを起動します。
$ open -a Simulator
シミュレータが起動したら事前に作成したアプリのディレクトリに移動し下記のコマンドを実行します。
$ flutter run
アプリが起動するとこんな画面が表示され動作確認ができます。
Androidのアプリ起動
インストールガイドに従いAndroidのエミュレータを起動します。
私の場合Android Studio->Configure->AVD Managerから起動しました。
エミュレータ起動後はiOSのアプリ起動と同様に下記のコマンドでアプリを動かします。
$ flutter run
アプリが動作するとこんな画面になります。
ただ、Androidのアプリ起動は安定していないのか一度失敗しました。
その時は数分経っても起動しないためターミナルを再起動し再度flutter runを実行したところアプリが起動することを確認できました。
また、接続後も下記のようなメッセージが表示されエミュレータとの接続が切れてしまうことがありました。
lost connection to device. flutter
終わりに
とりあえずエミュレータでのHello worldまでやってみました。
Flutter doctorのコマンドで必要な設定を確認できるため、あまり迷う事なく環境構築できました。
また、iOSとAndroidを同じプロジェクトで管理できるのはやはり便利。
ただエミュレータとの接続やアプリの起動で何度かうまくいかない事もあり、まだまだ安定していない印象もあります。
これ以上勉強するか若干悩み始めてしまう...