【Flutter】最小コードを読んで初めてのFlutter

はじめに

Flutterを学習し始めたため、公式ドキュメントを参考に練習も兼ねてログを残します。

最小のソースコード

以下が最小のソースコードなります。

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

実行すると以下になります。

　ソースコードを読む

上記のソースコードは、「中心に“Hello World”が表示される」コードになります。ソースコードのCenter()関数は、要素を中心に配置する関数になります。
Center()関数内のchildにText()関数を挿入することにより中心に文字を配置できるようになっているみたいです。とてもわかりやすいですね。

調整しやすく書き直したソースコード

少し配置を調整しやすくするため、以下のように書き直します。

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Container(
        color: Color.fromARGB(255, 255, 0, 0),
        width: 100.0,
        height: 100.0,
        child: Align(
          alignment: Alignment.center,
          child: Text(
            "hello world",
            textDirection: TextDirection.ltr,
          ),
        ),
      ),
    ),
  );
}

結果は以下になります。

このContainer()関数により、要素の範囲を設定できるようになります。このサンプルでは、幅100、高さ100の四角形の範囲(上手の赤い四角)を設定し、その範囲内の中心に“Hello World”を配置しています。

ここのalignment: Alignment.centerで配置する位置を中心に設定します。
例えば、alignment: Alignment.topLeftにすると以下になります。

おわりに

child要素にFlutterLogo(size:60)を追加すると、以下のようにFlutterのロゴが出力されます。画像を配置する際のデバッグに使えそうです。