LoginSignup
39

More than 5 years have passed since last update.

Flutterでアプリ開発 #1 環境構築

Last updated at Posted at 2018-03-05

そもそも「Flutter」とは

Flutterはネイティブアプリケーションを開発できるUIフレームワークです。
Dartで書かれたソースコードで、iOSとAndroidアプリの両方を作成することができます。
Googleさんが2018年2月22日にDart2を発表し、Flutterも盛り上がるだろうってことで
まずは入門として公式を読みながら環境構築・サンプルアプリが起動するところまでを書いてみます。

筆者の動作環境

macOS High Sierra 10.13.3

Setup

Flutterをインストール

お使いのマシンにFlutterを初めてインストールする場合は、リポジトリのbetaブランチをクローンして、Flutterツールをパスに追加します。

$ git clone -b beta https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH

次のコマンドを実行して、セットアップを完了するためにインストールする必要がある依存関係があるかどうかを確認してレポートを表示します。

$ flutter doctor

(中略)

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D102, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✗] Android Studio (not installed)
[!] VS Code (version 1.20.1)

! Doctor found issues in 4 categories.

初めてFlutterコマンドを実行すると、独自の依存関係がダウンロードされ、コンパイルされます。初回は時間がかかるかもしれませんが、二回目以降は早く終わります。

私の環境だとXcode、Android Studioどちらも入ってない環境だったので、レポートでたくさん注意受けてしまいました。
お使いの環境によって適宜対応しましょう。
ちなみに公式によると

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you may need to install or further tasks to perform (shown in bold text).

とあり、Dart SDKはFlutterにバンドルされているのでDartを個別にインストールする必要はないようです。

先程のレポートガイドが書いてあるので一つずつ実行し、必要なものを揃えた後に再度flutter doctorを実行して残った警告をチェックします。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D102, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.0)
[!] VS Code (version 1.20.1)
[!] Connected devices
    ! No devices available

! Doctor found issues in 2 categories.

[!] VS Code (version 1.20.1):これは私は開発用にVSCodeを入れていますが、Flutter開発用のプラグインが入ってないためです。以下で設定します。
[!] Connected devices:デバイスが繋がっていない。開発時は実機をつなぐよりシミュレータを使うほうが手軽なので、以下で設定します。

VS Codeの設定を行う

vscodeを開きメニューバーから表示>拡張機能を開くとプラグインの検索画面がでます。
そこでflutterと検索をすると以下2つが出てくるのでどちらもインストールします。
・Flutter Snippets for vscode(from IntelliJ IDEA)
・Dart Code

シミュレータをセットする

私の場合はXcodeを入れたばかりなのでシミュレータを設定していませんでした。
以下のコマンドを実行することにより、iOSのシミュレータが立ち上がります。これでアプリを実行するときのデバイスの設定が完了します。

 $ open -a Simulator.app

その後もう一度flutter doctorを実行するとすべての警告はクリアされていると思います。

サンプルを起動してみる

最初にクローンしたFlutterのリポジトリにはflutter/examples以下にいくつかのサンプルが用意されています。
今回はflutter/examples/hello_worldを起動してみましょう。
まずは対象のディレクトリに移動し、flutterコマンドを実行します。

$ cd flutter/examples/hello_world
$ flutter run

するとシミュレータでアプリが実行されます。

スクリーンショット 2018-03-05 17.54.15.png

なにこれ!!!文字ちっっっっっさ!!!!!!!wwww

まとめ

サンプルアプリの文字はめちゃくちゃ小さくて文字も見にくかったですが、
無事に起動までいけましたね。
サンプルアプリのソースコードは実装の参考になるのでいろいろ起動してソースコードをみていきたいと思います。

次回は実際に簡単なアプリをつくることをしたいです。

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
39