Flutterの環境構築

はじめに

 

この記事は、以下の動画をまとめたものです。

 

 

Mac を使用していることを前提とした記事なので、Windows をお使いの方はこちらの解説動画をご覧ください。

 

手順は公式 HP のmacOS installに沿って行っていきます。

ではさっそく環境構築を始めていきましょう!

 

 

    Flutter のインストール

     

    まずはじめに、Flutter をインストールします。

     

    Flutter 公式 HPの「Install」ページでmacOS を選択

     

    ②「Get the Flutter SDK」 から zip ファイルをダウンロードし解凍

     

     

    ③ユーザーフォルダ直下に「development」フォルダを作成し、ダウンロードした「flutter」フォルダを移動

    ※動画内では「Developer」という名前で作成していますがどちらでも問題ありません。

     

     

    フォルダ構成は、Macintosh HD > ユーザー > (ユーザー名)> development > flutterとなりました。

     

    パスを通す

     

    Flutterをインストールした後、Flutterを使えるようにするには「パスを通す」という作業が必要になります。

     

    ①使用しているシェルを調べる

     

    ターミナルを起動して以下を実行してください。

     

    echo $SHELL

     

    /bin/zshと返ってきたら使用しているシェルはzsh/bin/bash と返ってきたらbash を使用していることになります。

    このシェルによって次の作業が異なってきます。

    自分の環境に合ったほうを実行して進めてください。

     

    // zshの場合
    vim .zshrc
    
    // bashの場合
    vim .bash_profile

     

    ②vim というエディターが起動した状態になるので、i キーを押して「INSERT」モードに切り替える

     

    ③画像を参考にexport PATH="$PATH:[flutterフォルダが格納されているディレクトリ]/flutter/bin" を入力する

     

     

    なお、フォルダをターミナル内にドラッグ&ドロップすることでディレクトリが自動で入力されます。

     

     

    esc キーを押してINSERTモードを終了し、:WQ と入力しENTERで内容を上書き保存

     

    ⑤ターミナルで下記を実行し、パスが表示されれば設定完了!

     

    which flutter

     

    次に、AndroidとiOSのセットアップを行います。

     

    Android のセットアップ

     

     

    Android Studio 公式 HPからダウンロードし、案内に従ってインストールする

     

     

    ②Flutter、Dart のプラグインを導入するため、「Preferences」 を開く

     

     

    ③Flutter、Dart をインストールする

     

     

    ④Android Studio を再起動し、初期画面に「start a new flutter project」があることを確認する

     

     

    ⑤プロジェクトを作成する

     

    「Start a new Flutter Project」 → 「Flutter Application」の順で選択し、Project name にはアプリの名前を入れておきます。

     

     

    「Package name」は、アプリのストアで識別するための一意な名前を設定します。

    デバッグするだけなら初期設定の状態のままでも大丈夫です。

     

     

    ⑥デバッグのためにエミュレーターをダウンロードする

     

    「AVD Manager」にアクセスします。

     

     

    iPhone からエミュレーターをダウンロードします(画像は Pixel 3a を選択)。

     

     

    ⑦「再生ボタン」をタップしてエミュレーターを起動する

     

     

    ⑧デバックボタンを押してビルドできれば完了!

     

     

    これ以降は、プロジェクトを開いたらエミュレータが選択できるようになります。

     

    iOS のセットアップ

     

    最後に、iOSのセットアップを行います。

     

    ① Xcode をAppStoreからダウンロードする

     

     

    ②Android Studio に戻り、「Open iOS Simulator」でシミュレーターを起動する

     

     

    ③デバックボタンを押し、Androidと同様にビルドできれば完了!

     

    これでFlutterでアプリ開発を始める準備が整いました!

     

    Flutter大学ではYoutubeチャンネル、オンラインサロンを運営しています。

    興味がある方はぜひチェックしてみてください!

     


     

    Flutterを使ったアプリ開発を基礎から動画で学べる!

    Flutter大学Youtubeチャンネルはこちら↓

    https://www.youtube.com/channel/UCReuARgZI-BFjioA8KBpjsw

     

    質問し放題!みんなで開発!限定動画が見れる!

    Flutter大学オンラインサロンの入会はこちら↓

    https://kboyflutteruniv.com/