Help us understand the problem. What is going on with this article?

Flutter環境を作ってみた(Windows)

最近、仕事でスマホアプリの開発を行っていて、いろいろと調べる中でFlutterなるものがあることを知った。
環境構築してみたので、その時の手順を残しておく。

〇Flutterとは

 https://flutter.dev/

 Googleが開発したモバイルアプリ開発向けのプラットフォーム。
 言語はDart。

 2018年末にバージョン1.0がリリースされたばかりの割と新しめ。

◆特徴

image.png

  • 素早い開発
  • 表現力豊かで柔軟なUI
  • ネイティブパフォーマンス

〇環境構築

公式ガイドに沿って環境構築を行っていく。
https://flutter.dev/docs/get-started/install/windows

なお、Android StudioおよびAndroid SDKのインストールは完了している前提で記載する。

◆システム要件

image.png

  • OSはWindows7 SP1以降
  • ディスクスペースは400MByte
  • PCで以下のツールが 使えること
    • Windows PowerShell5.0以降(Windows10にはプリインストールされている)
    • Git(gitコマンドがコマンドプロンプトから使える状態)

●構築手順

SDKのダウンロード

image.png

  1. 「flutter_windows_vxxx.zip」よりSDKをダウンロード
  2. 任意の場所に解凍する(ただし、C:\Program Filesのような高い権限が必要な場所以外)
  3. 解凍したフォルダ内の「flutter_console.bat」をダブルクリックで起動

Flutterコンソールが立ち上がれば準備完了!

パスの設定

Flutterコンソールからでなく、いつも使っているコンソールから使いたい場合は環境変数の設定を行う
image.png

  • システムから環境変数の編集を行う
  • 「PATH」に「{Flutter CDK解凍フォルダパス}\bin」を追加

↓自分の設定内容
image.png

※モザイクはユーザー名です。

「flutter doctor」実行

image.png

  • コンソールで「flutter doctor」を実行する
  • 初期状態ではAndroid ADKがないため、エラーが出る

↓重要なところだけメモ

Android環境の構築

今回はAndroid環境構築済みのPCにてFlutter環境を作っているため、省略
Android環境構築が出来ていない場合は、↓に書いてある手順に沿って構築。
https://flutter.dev/docs/get-started/install/windows#android-setup

Android StudioとAndroid SDKのインストール

省略(ここで重要なのはANDROID_HOMEが正しく設定されていること)

AVD(Android Virtual Device作成)

省略(実機で動かすならいらない(と思う))

〇エディタの設定

今回はVS Codeを使う
また、VS Codeはインストール済みの状態から始める

FlutterおよびDartプラグインのインストール

image.png

  1. 拡張機能を開く
  2. Flutterを検索し、インストール

image.png

Flutter Doctorを実行し、セットアップができているか確認する

image.png

  1. 「表示 → コマンドパレット」からコマンドパレットを開く
  2. doctorと入力し、「Flutter:Run Flutter Doctor」を実行
  3. 出力窓に結果が出力されればOK

〇試しに動かしてみる

アプリケーションの作成

image.png

  1. コマンドパレットを開く
  2. flutterと入力し、「Flutter: New Project」を選択
  3. プロジェクト名を入力し、Enter
  4. プロジェクトの親ディレクトリを選択もしくは作成する
  5. プロジェクトが作成され、main.dartファイルが表示されるまで待つ

アプリケーションの実行

image.png

  1. VS Codeのステータスバー(ウィンドウ下部にある青いバー)
  2. DeviceSelectorエリアをクリック
    1. シミュレータが動いてない場合は「No Device」と表示されるため、シミュレータを起動する
      1. 画面上部に端末選択窓が表示されるため、端末(AVD)を選択すると起動する
    2. 実機で動かす場合はデバイスごとの設定が必要。
  3. 「デバッグ → デバッグ開始」もしくはF5押下
  4. アプリの起動を待つ(デバッグコンソールで状況確認できる)

↓起動した状態
image.png

Hot Reloadを試してみる

デバッグ状態でmain.dartの内容を変更し、保存すると即座にデバイスに反映されるよーという機能です。

main.dart(変更前)
'You have pushedthe button this many times:'
main.dart(変更後)
'You have clicked the button this many times:'

↓更新後
image.png

デバッグウィンドウに出力される時間を見る限り1secかからないくらい。
image.png

〇まとめ

まだ環境構築しただけなので何とも言えないが、ホットリロードは良さそう。
スマホアプリはビルドに時間がかかるイメージが強いので、修正→すぐ確認ができるのはとても良い!

UIに関してはWidget単位で配置していく形式らしい。
CordovaみたいにHTML/CSSでUI作れる~みたいなのに慣れていると、勉強コストが高そうな気がする。。
(Dart自体も触ったことがない。。)

一応、Flutter Studioっていう、UIをGUIで構築してコードを生成できるツールはあるらしい。
https://flutterstudio.app/
(Widgetの概念を理解しないと、使い方わからないかも。。)

今後はUI周りについても勉強していく。(余裕があれば記事も書く)
以上。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした