フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

FlutterがあればiOSもAndroidもDartだけでアプリを開発できる!! Flutterのチュートリアルをやってみた!!

スポンサーリンク

スポンサーリンク

f:id:ksakae1216:20180301235809p:plain

ねえ、知ってた?

 

Flutterがあると、Dartで開発したアプリがiOSでもAndroidでも動くんだって?!

 

もうiOS、Androidを別々に開発する必要無いですね。

  

って事でそんなFlutterのチュートリアルをやってみました。

※ちなみにPCはMacです。

 

 

Flutterのチュートリアル

FlutterはWindows、Mac、Linuxが用意されてます。

今回はMacで試しました。

 

Flutter Setup for macOS - Flutter

 

やってみた

結構丁寧に記載されてるのでそのまま実行するだけです。

 

但し、英語なのでGoogle翻訳で日本語にするのもいいかもしれません。

実際、私は日本語変換してチュートリアル進めました。

 

FlutterSDK取得

まずgitからflutterを取得します。

 

取得する前に作業用フォルダを作成しておくのがよいでしょう。

私は、"flutterWork"というフォルダを作成してその下でgitコマンドを実行しました。

 

f:id:ksakae1216:20180301231708p:plain

【コマンド】

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

 

パスの設定

次にパスの設定です。

f:id:ksakae1216:20180301231809p:plain

【コマンド】

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

 

他にインストールするものが無いかチェック

最後に、他にインストールするものが無いかチェックします。

※画面ハードコピー撮るの忘れました。

【コマンド】

flutter doctor

 

このコマンドは少し時間がかかりました。終わるまで待ちましょう。

 

ちなみに私はここで下記エラーが発生しました。

f:id:ksakae1216:20180301232413p:plain

"Android SKD"が無いからこのURLからインストールしろとのことです。

このURLにログインしてAndroid Studioをインストールしました。

 

その後、もう1回"flutter doctor"を実行すると今度はうまくいきました。

 

パスの更新

次はパスの更新です。

恐らくホームディレクトリで.bash_profileを開くか新規作成してパスを更新するんですが私は、zsh使ってるし、今回はお試しで今だけ使えればいいのでターミナル上で下記のコマンドを実行しました。

 

【コマンド】

export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH
echo $PATH

 

2つ目のコマンドを実行するとPATH変数の内容が表示されます。

flutter/binディレクトリが設定されていればOKです!

 

Xcode

設定もいよいよ最後です。

チュートリアルに従ってコマンド実行します。

 

【コマンド1】

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

 

【コマンド2】

sudo xcodebuild -license

※コマンド実行後、いっぱいメッセージが表示されて、ひたすらスペースキーを押下してなんとか終わった感じです。

 

iPhoneシュミレータの結果

お疲れ様です。いよいよシュミレータ動かしてアプリを起動してみます。

 

ターミナル上で下記コマンドを実行

【コマンド】

open -a Simulator

 

するとシュミレータが起動されます。

なんとiPhoneX!!

f:id:ksakae1216:20180301234335p:plain

 

それでは"Hello World"を表示するアプリを起動します。

 

アプリはexampleディレクトリ配下に格納されています。

[gitで取得したディレクトリ]/flutter/examples/hello_worldに移動します。

 

移動したら下記コマンドを実行してください。

【コマンド】

flutter run

 

するとアプリがシュミレータ上にインストールされ初回は自動で起動します。

f:id:ksakae1216:20180301235020p:plain

 

でかい画面に小さく"Hello World"(笑)

 

他にも株価アプリ

f:id:ksakae1216:20180301235703p:plain

 

最後に

今回は用意されてるのを起動しただけですが、結構簡単でした。

今度はDartでプログラム書いて実行してみたいと思います!!