Flutterに入門してみる ③最初のアプリ Part1

f:id:kun432:20201207110008p:plain

前回までに、環境構築とエミュレータを使っての動作確認ができるようになりました。ということで、"Get started"に従って、「はじめてのアプリ」を作ってみます。

flutter.dev

名前をランダムに生成してくれるアプリを作ります。

初期設定

"startup_namer"という名前のFlutterプロジェクトを作ります。

f:id:kun432:20201210015116p:plain

プロジェクトが立ち上がったら、”File” → "Project Structure"でSDKを設定しておきます。これ自動にならないのかな・・・

f:id:kun432:20201207104003p:plain

f:id:kun432:20201207104050p:plain

今回はiOS/Androidアプリだけじゃなくて、Webアプリも作るみたいです。Android Studioのターミナルを開いて、以下の通り入力します。

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

これでデバイスにWeb ServerとChromeが追加されました。なお、一度実行すれば今後のプロジェクトでも使えるみたいです。

f:id:kun432:20201210021013p:plain

Webアプリも含めた実行

main.dartを以下のコードでまるっと上書きします。

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

iOSシミュレータ/Androidエミュレータを起動しておきます。

f:id:kun432:20201210022518p:plain

Android Studioのターミナルからflutter devicesでデバイスが確認できます。iOSシミュレータ/AndroidエミュレータとChrome/Web Serverが認識されてますね。

$ flutter devices
4 connected devices:

sdk gphone x86 arm (mobile) • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
iPhone 12 Pro Max (mobile)  • 91599C13-9A00-4237-AA7E-63DA46BC8A97 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-2 (simulator)
Web Server (web)            • web-server                           • web-javascript • Flutter Tools
Chrome (web)                • chrome                               • web-javascript • Google Chrome 87.0.4280.88

flutter run -d allで全デバイスで実行します。

$ flutter run -d all

前回同様、iOSシミュレータ/AndroidエミュレータでFlutterアプリが起動しました。Webの方はどうもall指定でも開かないようなので、別途flutter runしないといけないのかな。

f:id:kun432:20201211002146p:plain

今開いているターミナルはhot reloadのために閉じたくないので、もう一つターミナルを立ち上げましょう。ターミナルの"+"をクリックします。

f:id:kun432:20201211002851p:plain

ターミナルのタブが増えました。Webの場合はflutter run -d chromeを実行します。

f:id:kun432:20201211003045p:plain

ブラウザが起動して、同じようにFlutterアプリが表示されていますね。

f:id:kun432:20201211003239p:plain

ターミナルを見るとこちらもhot reloadが有効なようです。

f:id:kun432:20201211003431p:plain

タブを切り替えないのがちょっと面倒ですが、これでiOS/Android/Webと3つの環境を同時にテストできますね！

Flutterのコード

ちょっとコードを見てみます。

5行目: Materialデザインを使うためのパッケージを読み込んでいます。
7行目: main()です。ここでMyAppが起動します。
9行目: MyAppクラスをStatelessWidgetから継承して作成してます。FlutterではWidgetがUIパーツの基本要素となり、いろんな種類のWidgetを組み合わせて1つのアプリのUIを作る、みたいな感じらしいです。
11行目以降でMaterialデザインのUIを設定していきます。
14行目: Scaffold Widgetを使って、上にタイトルを含んだバーがあって下に本文、みたいなよく見かける画面構成を作ります。なんとなくわかりますね。