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()

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

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

(D) textDirection: TextDirection.ltr

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

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。