flutter/dart開発〜入門編

こんにちは、開発担当の片岡です。

現在flutter/dartで自社アプリの開発をしているので、ブログを訪れてくださる方に向けてご紹介できればと思います。

flutterって何？

Googleが開発したdart言語のオープンソースフレームワークです。
dartはGoogleがjavaとjavascriptのいいところを抽出して改良した言語と言われています。flutter上で開発したアプリはWEB、iOS、Androidとマルチプラットフォームで動くようになります。

昨年11月時点では公式を除いてWEB上の資料や書籍も乏しく、やりたいことを実現する方法がわかりにくかったのですが、今年に入り爆発的な勢いで世界中から情報がoutputされています。

もちろんGoogle公式が専用サイトやyoutube等でチュートリアル情報を公開してくれていることもありますが、stack overflowやGithubなど開発者が集うサイトに投下されたflutter関連の疑問や不具合報告に対して、Googleの中の人や開発者同士の助け合いで非常に細やかかつ迅速に回答や助言をしてくれることが普及に役立っているように思います。

そのほか、各国のflutter開発者が出すプラグインも充実していて、やりたいことを英語でググれば現在ならばほぼ答えが見つけられる状況です。
まだまだ課題も多く黎明期ではありますが、プロダクト開発に用い始める企業も出てきたりと開発者からの注目も益々高まっていくことでしょう。

開発環境セットアップ

さてここからはMacでflutterを用いたアプリ開発をやってみようという初めての方に向けて、開発環境セットアップのやり方をご案内していきます。

前提

MacのパッケージマネージャーHomebrewがインストールされている
AndroidStudioとSDKがインストールされている
rbenvのインストールと最新のrubyインストールが済んでいる

手順

Flutter SDKのインストール

ここからstable版を取得して解凍

もしくはコマンド

git clone -b master https://github.com/flutter/flutter.git

で取得

./flutter/bin/flutter –version

でversion確認
解凍したFlutterディレクトリを適切な場所に置きます。
解凍したflutterにbinがあるので、そこにpathを通します。
bashを使っている場合は $HOME/.bash_profile、
zshを使っている場合は $HOME/.zshenvに次のように記述してください。

export PATH=~/$[配置先ディレクトリ]/flutter/bin:$PATH

解凍したディレクトリに移動している場合は以下のコマンドでOK:

$ export PATH=”$PATH:pwd/flutter/bin”

環境に合わせて、以下のいずれかのコマンドを実行し、読み込みます。

bashの場合

$ source ~/.bash_profile

zshの場合

$ source ~/.zshenv

次のコマンドで取得できなければ、PATHが通っていないのでやり直しましょう。

$ which flutter

試しに次のコマンドを実行してみましょう。このコマンドを実行すると開発環境構築で必要なものを教えてくれます。

$ flutter doctor

ここで表示される「×」になっている部分について対処します。
大体コマンドが併せて紹介されているので、その通りに実行していけば環境ができていきます。

開発開始

AndroidStudioのprojectを配置するディレクトリを適宜決めてください。
一例としてuser名/develop/AndroidStudioProjects
上記フォルダにAndroidStudioのProjectを作成します。

コマンドラインを開き、

$ flutter doctor

で問題がないか確認、あれば対応

[!] Connected device
! No devices available

が出た場合は、AndroidStudioでAVDマネージャーを開いて、検証したい端末のセットアップ・起動を行っておきます。

トラブルシューティング

もしもGithubなどにある既存パッケージを試しに動かそうと試みる方がいて、以下のようなエラーが出るとしたら、解決方法はこんなことかもしれません。
** パッケージのpubspec.yamlファイルに追加しているライブラリに参照エラーが出る場合**

AndroidStudioでpubspec.yamlを開き、dependencies:以下に使用しようとしているライブラリが記載されているか確認。なければ公式を確認して必要な一文を記載して保存。
表示されているpubspec.yamlの上部mFlutter Commandsに「Packages get」とあるのでクリックで取得
または pubspec.yamlのある階層で

$ flutter pub get

[もっと知りたい方はこちら参考に]

** which flutterが通らない場合は、pathの記載以下を参考にしてください。**

# rbenv PATH
export PATH="$HOME/.rbenv/bin:$PATH" if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi
eval "$(rbenv init -)"

# flutter PATH
export PATH="/Users/ユーザー名/develop/flutter/bin:$PATH"
eval "$(rbenv init -)"

buildができない時の参考

以上で入門編を終わります。
次回以降はflutter開発でハマったポイントと解消法などをお伝えできればと思います。それでは、また！