今まで作り慣れているブラウザアプリに加え、 Android アプリを作れたら開発の幅がさらに広がるなぁと思ったのでやってみます。
Flutter を使ってみた系の記事はすでに山ほどありますが、勉強の意味を兼ねてやってみようと思います。
Flutter 公式サイトの Get Started に従い、進めてみます。
Flutter のインストール
こちらのページ からお使いの OS に合った Flutter をインストールします。
エディタのインストールとセットアップ
今回は Android Studio というエディタを使用します。
こちら からダウンロード、インストールします。
インストールが終わったら、エディタに Flutter のプラグインをインストールします。
Android Studio を開き、 Welcome to Android Studio の画面で Configure > Plugins と進みます。
検索画面が表示されたら flutter と入力し、一番上に出てくる Flutter の Install をクリックします。
(このとき、 Dart のプラグインも合わせてインストールされます。)
インストールが終わったら IDE を再起動します。
新規プロジェクトの作成
Welcome to ... の画面が再度表示されたら、 Create New Flutter Project をクリックします。
Flutter Application が選択されていることを確認し、 Next をクリックします。
Flutter SDK Path に、インストールした Flutter のパスを指定します。
Project name と Description を指定し、 Next をクリックします。
次の画面は何もせず、 Finish をクリックします。
プロジェクトの作成が始まるのでしばらくお待ちください。
プロジェクトの実行
エディタ上部のメニューから Tools > AVD Manager を選択します。
仮想デバイスの一覧が表示されますので、一覧があれば Actions の 起動 アイコンをクリックして、仮想デバイスを起動します。
ない場合、下の Create Virtual Device... を選択して仮想デバイスを作成、起動します。
そうすると、画面右上のツールバーに先ほど指定したデバイスが表示されているはずです。
その状態で 起動 アイコンをクリックします。
起動しました。右下の + を押すとカウントアップします。
ホットリロードを試す
Flutter では、アプリを再起動することなく、コードの修正を反映させることができるホットリロードを搭載しています。
ここでは main.dart の 97 行目を以下のように修正し、文言を変更してみます。
- 'You have pushed the button this many times:',
+ 'You have clicked the button this many times:',
保存して画面を確認すると、文言が変わっているのがわかります。
続き
今回 Flutter を簡単に触ってみましたが、 Flutter 公式では、この後 Hello world を表示する処理を作成するものや、チュートリアルが何種類か用意されていますので、またあとでやってみたいと思います。
みなさんもぜひやってみてください。