Flutter で UI を構築してみる – Widget とはなんなのか知る

Flutter で UI は Widget (ウィジェット) の組み合わせからできています。テキストやアイコンもウィジェットですし、それらを格納する要素も全てウィジェットです。

ウィジェットはツリー構造になっていて、ウィジェットの中にウィジェットを配置していき 複雑な UI を作っていきます。

今回は2つのウィジェットを使ってシンプルなアプリのUIを表示してみます。

今回のゴール

デバイスエミュレータ上でウィジェットを利用して文字を表示してみます。
とてもシンプルに、 Center ウィジェットと Text ウィジェットを利用します。

import 'package:flutter/material.dart';

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

(A) runApp()

runApp() の引数にはウィジェットを渡します。
runApp() は、ウィジェットをビルドするための準備をするための関数です。

今回の例では、 Center ウィジェットを runApp に渡しています。

(B) Center()

Center ウィジェットは、中のウィジェットをセンター寄せにするコンテナです。このウィジェット内に配置された子ウィジェットを上下左右ともにセンター寄せにします。

今回の例では、 子要素の Text ウィジェットを画面の中央に表示させています。

(C) Text()

その名の通り、文字列のためのウィジェットです。

第１引数に表示したい文字列を、それ以降の引数にスタイルなどの設定を入れていきます。詳しくは次回まとめます。

(D) textDirection: TextDirection.ltr

Flutter はそれ自身では、テキストの方向が LTR(左横書き) なのか RTL (右横書き) なのかわかりません。それを明示するために Text ウィジェットで textDirection を指定しています。