ねえ、知ってた?
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コマンドを実行しました。
【コマンド】
git clone -b beta https://github.com/flutter/flutter.git
パスの設定
次にパスの設定です。
【コマンド】
export PATH=`pwd`/flutter/bin:$PATH
他にインストールするものが無いかチェック
最後に、他にインストールするものが無いかチェックします。
※画面ハードコピー撮るの忘れました。
【コマンド】
flutter doctor
このコマンドは少し時間がかかりました。終わるまで待ちましょう。
ちなみに私はここで下記エラーが発生しました。
“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!!
それでは”Hello World”を表示するアプリを起動します。
アプリはexampleディレクトリ配下に格納されています。
[gitで取得したディレクトリ]/flutter/examples/hello_worldに移動します。
移動したら下記コマンドを実行してください。
【コマンド】
flutter run
するとアプリがシュミレータ上にインストールされ初回は自動で起動します。
でかい画面に小さく”Hello World”(笑)
他にも株価アプリ
最後に
今回は用意されてるのを起動しただけですが、結構簡単でした。
今度はDartでプログラム書いて実行してみたいと思います!!
コメント