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

技術

f:id:ksakae1216:20180301235809p:plain

ねえ、知ってた?

 

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

 

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

  

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

※ちなみにPCはMacです。

 

  • iPhoneシュミレータの結果
  • 最後に
  •  

    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でプログラム書いて実行してみたいと思います!!

    コメント

    タイトルとURLをコピーしました