2020/10/20 Flutter : Introduction to widgetsの訳

 

Flutterウィジェットは、Reactからインスピレーションを得た最新のフレームワークを使用して構築されています。

中心的な考え方は、ウィジェットからUIを構築することです。 ウィジェットは、現在の構成と状態を前提として、ビューがどのように表示されるかを記述します。

ウィジェットの状態が変化すると、ウィジェットはその描写を再構築します。

フレームワークは、ステートが移り変わる際のレンダーツリーの必要最小限の変更を実現するために、変更前の描写との差分を把握します。


Hello world

最も小さいFlutterのアプリはシンプルにrunApp()関数をウィジェットと共に呼び出すものです。

import 'package:flutter/material.dart';

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

runApp( )関数はWidgetを引数にとり、そのWidgetをウィジェットツリーのルートに配置します。このサンプルでは、ウィジェットツリーは二つのウィジェット、CenterウィジェットとTextウィジェットで構成されています。

フレームワークはルートウィジェットが画面を占有するようにします。つまり”Hello world”の文字列が画面の中央に表示されることになります。

この場合、テキストの方向を指定する必要があります。 MaterialAppウィジェットを使用すると、後で説明するように、これが自動的に処理されます。

アプリをコーディングしていると、StatelessWidgetか、あるいはStatefulWidgetのサブクラスを宣言することがよくあります。その二つの違いは何らかのstate(状態)を管理するかどうかです。

ウィジェットの主な仕事はbuild()メソッドを実装することです。build()メソッドは他の子孫ウィジェットを描画します。

フレームワークはそれらの子孫ウィジェットを順番に一番下の、内在するレンダーオブジェクトを表すウィジェットまで繰り返しビルドします。


Basic widgets

Flutterにはいくつものパワフルな基本的なウィジェットがあり、以下に示すものがよく使われます。

工事中🏗


Stack…