Flutter入門 / 解説 | SDKのインストール

こんにちはnasustです。Flutterを学び始めましたので、学びながら記事を書きます。

Flutterとはスマートフォン向けアプリのフレームワーク

FlutterとはGoogleが開発したスマートフォン向けアプリのフレームワークです。 iOSとAndroidで高品質なUI作成する事ができます。

開発言語はDartで、このプログラミングだけでiOSとAndroidに最適化されたアプリが開発出来ます。あとベータ版ですがWebのSPAとしても開発する事が出来ます。

Flutterの開発で特に便利なのがホットリロードという機能です。高品質なアプリを開発するにはトライ & エラーを繰り返す事が多くなります。ホットリロードは素早く簡単に開発中の内容をエミュレーターまたは実機に反映させる事が出来ます。

Flutterのインストール

Flutteのサイトにアクセスして、 Get started をクリックして自分のOSに合うSDKのZIPファイルをダウンロードします。

展開したSDKを自分の開発用ディレクトリに移動します。私の場合はMacで~/Documents/Dev/sdk/flutterに置きました。

次に .bash_profileを開いてPATH環境変数を設定します。

export PATH=$PATH:~/Documents/Dev/sdk/flutter/bin

パスが通ったら以下のコマンドを実行します。

$ flutter precache

flutterが開発に必要なバイナリなどダウンロードしてくれます。

そしてFlutterで開発環境をチェックしてくれるflutter doctorコマンドを実行します。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
 
[] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
[] Android Studio (version 3.4)
[!] IntelliJ IDEA Community Edition (version 2017.3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[] VS Code (version 1.35.1)

と沢山問題が表示されました。この画面の通りにコマンドを実行して解決します。

もう一度、flutter doctorを実行します。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-JP)
 
[] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[] Android Studio (version 3.4)
[] IntelliJ IDEA Community Edition (version 2017.3.7)
[] VS Code (version 1.35.1)
[] Connected device (1 available)

• No issues found!

Flutterのアプリを実行

以下のコマンドでシンプルなアプリを実行します。

flutter create my_app
cd my_app
flutter run

成功すればエミュレーターでアプリが起動します。

flutter

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker