Flutterとは

Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.

Googleが開発したポータブルのUIツールキットである。
大きなメリットと言えば、一つのソースコードで、いろんなプラットフォームのネイティブアプリにコンパイルできる。

  • モバイル
    • Android
    • IOS
  • Web
  • デスクトップ

環境構築(Windows)

Visual Studio Code

  1. Visual Studio Codeをダウンロードして、インストール
  2. Flutterエクステンションをインストール

Android Stadio

開発はVS Codeで使うが、念のため、構築します。

  1. Android Stadioをダウンロードして、インストール
  2. Flutterプラグインをインストール
  3. AVDマネージャーを使って、Androidモニターを作成して起動

Flutter

  1. Flutterをダウンロード

  2. ダウンロードしたファイルをローカルに解凍

    例：C:\tools\flutter\flutter

    自体はGithubのクーロンであり・・・

    https://github.com/flutter/flutter/tree/stable

  3. 環境変数を設定

    変数 値 説明
    FLUTTER_HOME <解凍先> 新規
    Path %FLUTTER_HOME%\bin 追記

  4. 環境確認

     $ flutter --version
 Flutter 1.7.8+hotfix.3 • channel stable • https://github.com/flutter/flutter.git
 Framework • revision b712a172f9 (2 weeks ago) • 2019-07-09 13:14:38 -0700
 Engine • revision 54ad777fd2
 Tools • Dart 2.4.0

  5. Flutterの確認

    初回時、ライセンスの同意が求められますが、全部同意するでしょう。

     $ flutter doctor
 Doctor summary (to see all details, run flutter doctor -v):
 [√] Flutter (Channel stable, v1.7.8+hotfix.3, on Microsoft Windows [Version 10.0.18362.239], locale ja-JP)

 [√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
 [√] Android Studio (version 3.4)
 [√] VS Code (version 1.31.1)
 [√] VS Code, 64-bit edition (version 1.36.1)
 [√] Connected device (1 available)

 • No issues found!

サンプルで環境確認

  1. サンプルアプリを作成

     $ flutter create myapp
 Creating project myapp...
 ・・・・・・
 myapp\test\widget_test.dart (created)
 Running "flutter pub get" in myapp...                               5.1s
 Wrote 66 files.

 All done!
 [√] Flutter is fully installed. (Channel stable, v1.7.8+hotfix.3, on Microsoft Windows [Version 10.0.18362.239], locale ja-JP)
 [√] Android toolchain - develop for Android devices is fully installed. (Android SDK version 29.0.1)
 [√] Android Studio is fully installed. (version 3.4)
 [√] VS Code is fully installed. (version 1.31.1)
 [√] VS Code, 64-bit edition is fully installed. (version 1.36.1)
 [√] Connected device is fully installed. (1 available)

 In order to run your application, type:

 $ cd myapp
 $ flutter run

 Your application code is in myapp\lib\main.dart.

  2. サンプルアプリ起動

     $ cd myapp
 $ flutter run
 Using hardware rendering with device Android SDK built for x86 64. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
 Launching lib/main.dart on Android SDK built for x86 64 in debug mode...
 Initializing gradle...                                              0.9s
 Resolving dependencies...                                           4.6s
 Running Gradle task 'assembleDebug'...
 Running Gradle task 'assembleDebug'... Done                        25.8s
 Built build\app\outputs\apk\debug\app-debug.apk.
 Installing build\app\outputs\apk\app.apk...                         3.0s
 Error connecting to the service protocol: HttpException: Connection closed before full header was received, uri = http://127.0.0.1:11982/xzsrpAX29uM=/ws

  3. 結果確認

    Flutterサンプル結果

参照

  1. Flutter