Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@2ero20ne(溝手 光流)in株式会社リブゲート

Flutterを使ってみよう｜環境構築

Last updated at Posted at 2019-12-10

MacOSの環境

  • オペレーティングシステム: macOS (64-bit)
  • ディスク要領: 2.8 GB (IDEツールなどのサイズは含まない)
  • ツール: Flutterは下記のコマンドが利用可能であることが必要です
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which

※上記のコマンドは、MacOS標準コマンドです。もしコマンドがない場合はダウンロードしておきましょう。
私はMacbook Pro 16インチにしてbashがインストールされていなかったのでbashをインストールします。

brewコマンドをインストールしていない方はこちらです。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brewを使ってbashをインストールします。

brew install bash

brewでインストールしたbashは /usr/lacal/bin/bash にあるので、これをログインシェルとして変更する。

/etc/shells の中に /usr/local/bin/bashを追記する。

sudo vi /etc/shells

chshコマンドでログインシェルとして変更する。

chsh -s /usr/local/bin/bash

Terminalを再度立ち上げたらbashで起動します。
以上で、bashの設定は完了です。

Flutter SDKのダウンロード

  1. FlutterSDKの安定したリリースバージョンを入手します。
    ここでは最新バージョン(2019/12/10現在)を載せておきます。
    flutter_macos_v1.9.1 + hotfix.6-stable.zip
    過去のバージョンを入手したい場合はこちらをご覧ください。

  2. ダウンロードしたZIPファイルを任意の場所に解凍します。
    今回、私は~/developフォルダの中に解凍したflutterフォルダを置きます。

    cd ~/develop
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip

  3. Flutterツールのパスを通す

    export PATH="$PATH:~/develop/flutter/bin"

    これだと、新しくTerminalを立ち上げた時にパスがまた初期化されてしまうので、パスを永続化します。

    source $HOME/.bashrc

    Terminalを再起動し、次のコマンドでパスが通っているか確認します。

    echo $PATH

    ~/develop/flutter/bin が表示されたら永続化されています。

iOSセットアップ

Xcodeインストール

FlutterでiOSアプリを開発するにはXcodeが必要です。

  1. WebまたはMacAppStoreでXcodeの安定した最新バージョンをインストールします。

  2. Terminalから次を実行して、新しくインストールされたバージョンのXcodeを使用するようにXcodeのコマンドラインツールを設定します。

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

    コマンドでXcodeのライセンスに同意します。

    sudo xcodebuild -license

    spaceで下まで読み、agreeと入力しライセンスに同意します。

iOSシミュレーターをセットアップ

Flutterでの開発をiOSシミュレーターで実行、テストする場合は次の手順を実行します。

  1. iOSシミュレーターを起動します。

    open -a Simulator

  2. シミュレーターのメニュー[ Hardware ] > [ Device ]で、シミュレーターが64ビットデバイス（iPhone5s以降）を起動しているか確認し、任意のものを起動します。

Androidセットアップ

Android Studioをインストール

  1. Android Studioをダウンロードし、インストールします。
  2. Android Studioを起動し、「Android Studio Setup Wizard」を実行します。
    これにより、最新のAndroid SDK、Android SDK Platform-Tools、およびAndroid SDK Build-Toolsがインストールされます。
    これらはFlutterでAndroid開発をする際に必要です。

Android StudioにFlutterプラグインをインストール

  1. Android Studioを起動します。
  2. [ Configure ] > [ Plugins ]
  3. 検索バーでflutterを検索します。
  4. Flutterをインストール
  5. インストール後、Android Studioを再起動します。

Androidエミュレーターをセットアップ

Flutterでの開発をAndroidエミュレーターで実行、テストする場合は次の手順を実行します。

  1. Android Studioを起動します。
  2. [ Configure ] > [ AVD Manager ] > [ Create Virtual Device... ]
  3. デバイスを選択し、[ Next ]
    私はPixel 3を選択しました。
  4. システムイメージ（x86やx86_64）を選択し、[ Next ]
    私はAPIレベル29のx86を選択しました。
  5. Emulated Performanceは[ Hardware - GLES 2.0 ]を選択し、[ Finish ]
  6. 作成したデバイスのAction[ ▶︎ ]でAndroidエミュレーターを起動できます。

Visual Studio Codeのセットアップ

Flutterが使えるIDEツールならなんでもいいのですが、今回はVS CodeでFlutterの環境を整えます。
Visual Studio Codeをダウンロードしてください。

Flutterプラグインのインストール

  1. VS Codeを起動します。
  2. サイドメニューのEXTENSIONSでFlutterと検索します。
  3. 検索結果のFlutterをインストールします。（Dartプラグインもインストールされます）

Flutter Doctorでセットアップを検証

セットアップの検証がOutputで行われます。
検証結果を見て足りないものは対応しましょう。
足りないものについては、何をすれば良いか親切に教えてくれるので解決できます。

  1. ⌘＋Shift＋P でコマンドパレットを開きます。
  2. "doctor"と入力し、Flutter: Run Flutter Doctorを選択してEnterを押します。

Flutterアプリを触ってみる

  1. VS Codeを起動します。
  2. ⌘＋Shift＋P でコマンド、Flutter: New Projectを選択します。
  3. 今回はテストアプリとして"test_app"(プロジェクト名)を入力し、Enterを押します。
  4. 保存場所を指定した後に、自動で新規ウィンドウが開かれます。
  5. プロジェクトが出来上がるまで少し待ちましょう。
  6. main.dartファイルが勝手に開かれ、サンプルコードが記述されています。

シミュレーターにビルド

  1. 好きなシミュレーターを起動しましょう。
  2. 私はiOSのシミュレーターを起動しました。
  3. シミュレーターが起動できたら、VS Codeの[ デバッグ ] > [ デバッグの開始 ]を選択します。
  4. Xcodeビルドが始まります。
  5. ビルドが終了すると、シミュレーターで「Flutter Demo Home Page」というサンプルアプリが開かれます。

ホットリロードを体験

Flutterにはホットリロード機能が搭載されています。
保存をすると再度ビルドをしなくても、自動で反映される機能です。
またホットリロード時に、状態をそのままで反映することができます。
とりあえず、実際に現在開かれているサンプルアプリで試していきましょう。

  1. main.dartの23行目の以下を書き換えます。

    main.dart
    home: MyHomePage(title: 'Flutter Demo Home Page'),

  2. 書き換えた後に、保存をしてみましょう。

    main.dart
    home: MyHomePage(title: 'Test App'),

    シミュレーターのアプリに1秒ほどで即反映されます。

  3. アプリの＋マークを何度か押して、表示されている数字を増やしましょう。
    この表示されている数字は、状態を持っています。
    状態と言っても、グローバルな数字を持っているだけですが、通常はテスト中に再ビルドすると、この状態は初期化されて、0に戻ります。
    ですが、Flutterは状態を保ったまま反映を行えます。

  4. 再度、先ほどの場所を書き換えて、保存してみましょう。

    main.dart
    home: MyHomePage(title: 'Test App Ver2'),

    状態を保ったまま反映ができたと思います。
    これがFlutterのホットリロードです。

最後に

今回はFlutterの開発環境構築編を書かせていただきました。
どこかの誰かのお役に立てれば幸いです。ご覧いただきありがとうございました。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?