Flutter学習:1日目

かねてから興味のあったandroid開発に挑戦。

ということでflutterでの開発に挑戦してみようかと思います。

まずはよくわからないので、評判がよさげだった#udacityのBuild Native Mobile Apps with Flutterを使って学習を進めて、その内容をまとめてみます。

gitとdockerのインストール記事？一旦放置で。じゃないと気分が続かない。。。

1.Introduction

Flutterはすごいよ。この講座その基礎を学ぶよ。 以上

2.Why Flutter?

Flutter開発は早いよー。 以上

3.Why Dart?

DartはJIT¹とAOT²の両方をサポートしているから、動作も早いし開発も早いよー。 以上

4.Set Up Your Environment

動画なし。 Flutterの公式にしたがって、開発環境をインストールしよう。 以上

5.Build a Flutter App

AndroidStudioでのプロジェクトの立ち上げ - 簡単なファイル構成の説明 - サンプルソースのエミュ上での起動までを説明。 以上

私は開発環境にVSCodeを選択したので、VSCode視点でまとめてみる。
※公式に従った環境整備は一通り終わってる前提です

新規プロジェクトの立ち上げ

1. VSCodeでコマンドパレットを開く
2. [Flutter: New Project]を選択
3. プロジェクト名を入力(今回の場合はhello_rectangle)
4. プロジェクトの保存場所を選択(任意)

⇒新しいウィンドで新規プロジェクトが立ち上がる。
　この時、色々なファイルが自動生成されるため、ちょっと時間がかかる。

簡単なファイル構成の説明

• クロスプラットフォームだからiosとandroid用のファイルが出来上がってるよ。
  ただ、ここは今は気にしなくていいよ

• lib/main.dartがメインだよ。

サンプルソースのエミュ上での起動

1. 動画外のテキストスペースに記載されているページからサンプルコードを取得
2. main.dartの中身を完全に置き換え
3. [F5]キーでデバッグ開始。この時エミュを起動していない場合は起動するエミュを選択

⇒エミュ上にアプリが立ち上がる。
　なお、初回はビルドに時間がかかる模様

6.Quiz: Build the Hello Rectangle App

5.Build a Flutter Appで説明した内容を実際に手を動かしてやってみてね。 以上

今日のまとめ

今日の分はただの概念のとか説明だけだったので、さらさらっといけた。
次からはもう少し難しくなりそうなので、きっとこうはいかないね。

---

1. JustInTimeの略。要は実行時コンパイル。たぶんこれのおかげで開発時のHotReloadを実現してる。↩

2. AheadOfTimeの略。要は事前コンパイル。たぶん開発時以外はこっちを使ってる。なのでアプリリリース後の挙動も早い。↩