1. teracy55

    Posted

    teracy55
Changes in title
+Flutter環境を作ってみた(Windows)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,158 @@
+最近、仕事でスマホアプリの開発を行っていて、いろいろと調べる中でFlutterなるものがあることを知った。
+環境構築してみたので、その時の手順を残しておく。
+
+# 〇Flutterとは
+ https://flutter.dev/
+
+ Googleが開発したモバイルアプリ開発向けのプラットフォーム。
+ 言語はDart。
+
+ 2018年末にバージョン1.0がリリースされたばかりの割と新しめ。
+
+### ◆特徴
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/32d9dcfb-c0b6-fc88-aa60-a97b1ac3610b.png)
+
+- 素早い開発
+- 表現力豊かで柔軟なUI
+- ネイティブパフォーマンス
+
+# 〇環境構築
+公式ガイドに沿って環境構築を行っていく。
+https://flutter.dev/docs/get-started/install/windows
+
+なお、Android StudioおよびAndroid SDKのインストールは完了している前提で記載する。
+
+
+### ◆システム要件
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/411c1b86-520b-b7bc-a25d-cd6dd23f0284.png)
+
+- OSはWindows7 SP1以降
+- ディスクスペースは400MByte
+- PCで以下のツールが 使えること
+ - Windows PowerShell5.0以降(Windows10にはプリインストールされている)
+ - Git(gitコマンドがコマンドプロンプトから使える状態)
+
+## ●構築手順
+### SDKのダウンロード
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/8b89d3b2-65ce-95fd-d357-cc94f1148854.png)
+
+1. 「flutter_windows_vxxx.zip」よりSDKをダウンロード
+2. 任意の場所に解凍する(ただし、C:\Program Filesのような高い権限が必要な場所以外)
+3. 解凍したフォルダ内の「flutter_console.bat」をダブルクリックで起動
+
+Flutterコンソールが立ち上がれば準備完了!
+
+
+### パスの設定
+Flutterコンソールからでなく、いつも使っているコンソールから使いたい場合は環境変数の設定を行う
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/91882d22-7c57-ed84-67a5-4bd57dba8ba1.png)
+
+- システムから環境変数の編集を行う
+- 「PATH」に「{Flutter CDK解凍フォルダパス}\bin」を追加
+
+↓自分の設定内容
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/e9c93e92-dd79-bd45-07aa-e86fdaa9594f.png)
+
+※モザイクはユーザー名です。
+
+### 「flutter doctor」実行
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/f8f5e840-8444-f2a4-c1ea-b9b1c9030746.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](https://qiita-image-store.s3.amazonaws.com/0/325108/3d318737-0db1-2ce7-29df-33159f9112bf.png)
+
+1. 拡張機能を開く
+2. Flutterを検索し、インストール
+
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/cd58dc49-6fb8-8d0f-fc3b-5afd51938ae1.png)
+
+
+### Flutter Doctorを実行し、セットアップができているか確認する
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/ef1120e3-e865-8dd1-1d56-54840967ff66.png)
+
+1. 「表示 → コマンドパレット」からコマンドパレットを開く
+2. doctorと入力し、「Flutter:Run Flutter Doctor」を実行
+3. 出力窓に結果が出力されればOK
+
+
+# 〇試しに動かしてみる
+### アプリケーションの作成
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/1b2ac6cc-76d5-6165-b5ba-032acf883218.png)
+
+1. コマンドパレットを開く
+2. flutterと入力し、「Flutter: New Project」を選択
+3. プロジェクト名を入力し、Enter
+4. プロジェクトの親ディレクトリを選択もしくは作成する
+5. プロジェクトが作成され、main.dartファイルが表示されるまで待つ
+
+### アプリケーションの実行
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/56994ac2-94c9-ba91-c6f3-cd38695a5697.png)
+
+1. VS Codeのステータスバー(ウィンドウ下部にある青いバー)
+2. DeviceSelectorエリアをクリック
+ 3. シミュレータが動いてない場合は「No Device」と表示されるため、シミュレータを起動する
+ 4. 画面上部に端末選択窓が表示されるため、端末(AVD)を選択すると起動する
+ 4. 実機で動かす場合はデバイスごとの設定が必要。
+5. 「デバッグ → デバッグ開始」もしくはF5押下
+6. アプリの起動を待つ(デバッグコンソールで状況確認できる)
+
+↓起動した状態
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/0f7250a3-516f-b166-6c91-2eebca3b3e45.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](https://qiita-image-store.s3.amazonaws.com/0/325108/e140d8fa-0966-34cf-63fb-b624ea7a5c56.png)
+
+
+
+デバッグウィンドウに出力される時間を見る限り1secかからないくらい。
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/cb0a9901-a894-9af2-f0c6-3fb8a9aa5e08.png)
+
+
+# 〇まとめ
+まだ環境構築しただけなので何とも言えないが、ホットリロードは良さそう。
+スマホアプリはビルドに時間がかかるイメージが強いので、修正→すぐ確認ができるのはとても良い!
+
+UIに関してはWidget単位で配置していく形式らしい。
+CordovaみたいにHTML/CSSでUI作れる~みたいなのに慣れていると、勉強コストが高そうな気がする。。
+(Dart自体も触ったことがない。。)
+
+一応、Flutter Studioっていう、UIをGUIで構築してコードを生成できるツールはあるらしい。
+https://flutterstudio.app/
+(Widgetの概念を理解しないと、使い方わからないかも。。)
+
+
+今後はUI周りについても勉強していく。(余裕があれば記事も書く)
+以上。