Flutterで初めてのプロジェクト

• AndroidStudioを起動します。
• プロジェクト＞New Flutter Projectとクリックします。
• デフォルトのまま次へクリックします。

必ず小文字アルファベットでプロジェクト名を入力します。

例：wintodo

テスト用のプロジェクトはデフォルトのままでいいですが、本番を考慮すれば、ご自身のドメンを逆さまに表記します。

ドメインが、 builwing.comなら、com.builwingにします。

Webブラウザ用のアプリも同時に作成したい場合は、Platform項目のwebにチェックを入れます。

完了をクリックすると新規プロジェクトが作成されます。

まずデフォルトのアプリを起動してみましょう。

デバイスの選択でOpen iOS Simulatorを選択します。

すると、iPhoneのシミュレーターが起動します。

実行ボタン（緑の右向き三角）をクリックするとデフォルトのアプリが起動します。

右下の ＋ ボタンをクリック（タップ）するたびに数字がアップするだけの簡単なアプリです。

lib/main.dartを開き、中のコードを全削除します。

⌘＋aで全選択からdelete

imp + Enterとすると、AndroidStudioが候補を表示しますので、material.dartを選択すると、下記の様に自動的に入力されます。

import 'package:flutter/material.dart';

下記の様にmain関数を記述します。

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

2行ほど下の方で、stl と入力してEnterします。

するとStatelessWidgetのコードスニペットが生成されますので、カーソルのある箇所で、MyAppと入力してEnterします。

return Containerの行以降を下記に変更します。

    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );

これでプログラムの第一歩 HelloWorldプログラムの完成です。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

下記に簡単な説明書いておきます。

インポート文（1行目）

この行は、Flutterのmaterialライブラリをインポートしています。material ライブラリは、Material Designのウィジェット、カラー、テーマなどを提供し、これによりアプリケーションに美しいUIを作成することができます。

メイン関数（3〜5行目）

main関数は、Flutterアプリケーションのエントリーポイントです。runApp関数は、アプリケーションを起動し、渡されたウィジェット(MyAppウィジェット)を画面に描画します。

• void：戻り値のない型です。つまり、return が無いということです。
• 下記の様に記述することも出来ます。

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

• 上記の => はアロー演算子といい1行コードの時に使用できます。

MyAppクラス（7〜20行目）

MyAppクラスはStatelessWidgetを拡張しています。StatelessWidget は、不変のウィジェットで、その状態は変更されません。MyApp クラスは、カスタムのコンストラクタを定義し、buildメソッドをオーバーライドしています。

• Widget：ウィジェットとはアプリを構成する要素です。基本的にFlutterの見た目を構成する部分はほとんどWidgetでできていると考えても問題ありません。
• extends：クラスの継承を意味します。つまり、MyAppクラスは、StatelessWidgetを継承します。
• StatelessWidget：不変的なWidgetで、ほとんどのウィジェットはこれに当たります。ボタンや毎回同じ表示をする部分はこれを使います。

コンストラクタ（8行目）

MyAppのコンストラクタはオプショナルなkeyパラメータを受け取り、親クラスのコンストラクタに渡します。

• const：再代入ができない変数（定数）を指定するときに使います。同じく、再代入できない変数で、finalが有りますが、fainalは値の代入時に判断され、constはコンパイル時に判断されます。
• key：Widgetを再描画するときに使用するIDを指定します。取りあえずは現状では、理解できなくても大丈夫だと思います。

buildメソッド（11〜19行目）

buildメソッドは、このウィジェットが画面にどのように表示されるかを定義します。このメソッドはMaterialAppウィジェットを返し、このウィジェットはアプリケーションのルートウィジェットとなります。

<no device selected>と書かれた箇所をクリックして、Open iOS Simulatorを選択します。

するとiPhone のシミュレーターが起動します。

緑の右向き三角のRunアイコンをクリックして、アプリを起動します。