[Flutter][Tips][2] Widgetとは?

Flutter における Widget(ウィジェット)とは?

Flutterでは、画面もボタンも入力フォームも、全て「Widget」と呼ばれています。つまり、画面を構成するUIパーツの総称を「Widget」と呼んでいるのですね。

個人的に触った感じでいうと、

Flutterの開発=Widgetを重ねて、画面を組み立ていく

みたいなイメージです。

 

公式の解説も一応載せときますね。

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

Widgetは、現在の構成と状態(state)が与えられた場合のビューの外観を定義したものです。

Widgetの状態が変化すると、それに合わせてWidgetは再構築されます。

Flutterフレームワークは、前の状態と比較して、ある状態から次の状態に遷移するために基本的なレンダーツリーで必要な最小限の変更を勝手に選択してくれます。

 

メニューバー付き「Hello World」アプリの実装例

実行結果↓

 

ソース(解説付き)①、②、③の順に実行されます↓

import 'package:flutter/material.dart';

//③MyAppBar(②-1の部分)の設計図
class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    // Containerは、ただの長方形の箱。普通はこの中に子Widgetを入れる
    return Container(
      height: 56.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      // Rowは「行」として子Widgetを横一列に並べる
      child: Row(
        children: [
          //画面左上のメニューアイコン
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the button
          ),
          //画面上中央のタイトル
          Expanded(
            child: title,
          ),
          //画面右上の検索アイコン
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}
//②MyScaffold(②の部分)の設計図
class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          //②-1の部分
          MyAppBar(
            title: Text(
              'Example title',
              style: Theme.of(context).primaryTextTheme.headline6,
            ),
          ),
          //②-2の部分
          //Expandedは他の子Widgetに使われなかった残りのスペース全部のこと
          Expanded(
            child: Center(
              child: Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  //①runApp関数は最初に実行される。Widgetツリーのルート
  runApp(MaterialApp(
    title: 'My app',
    home: MyScaffold(),
  ));
}
末岐 碧衣
  • 末岐 碧衣
  • フリーランス のシステムエンジニア。独立後、一度も営業せずに月収 96 万円を達成。1986年大阪生まれ。早稲田大学理工学部卒。システムエンジニア歴 12年。
    2009年、ITコンサルティング企業に入社。3年目でコミュ障が爆発し人間関係が崩壊。うつにより休職するも、復帰後はコミュ障の自覚を持ち、「チームプレイ」を徹底的に避け、会社組織内においても「一人でできる仕事」に専念。社内外から評価を得た。
    無理に「チームプレイ」するよりも「一人でできる仕事」に専念した方が自分も周囲も幸せにできることを確信し、2015年フリーランスとして独立。

コメントする