Flutterアプリの基本構成要素・ウィジェット

はじめに

Flutterをはじめるに当たり、最も基本的な要素について簡単に述べておきます。

FlutterのアプリはWidget(ウィジェット)というパーツの組み合わせでできています。下の図で一番トップに書いてあるのがルートのWidgtetで、その子Widgetが1つあるいは複数あってツリー構造を形成しています。

このWidgetをブロック細工のように組み合わせていくのがFlutterアプリ開発です。

Widgetには大きく分けて2種類：

GUIのパーツを構成する、目に見えるもの
レイアウトを構成する、目に見えない空間を制御するもの

があります。

GUIパーツはボタンだとかテキストを入力するフィールドなどです。見えない部分はパーツを縦に並べる、横に並べる、空白を作るといったものです。

これってHTML/CSSによるウェブページ構成とほとんど変わらない考え方ですよね。

ある意味、HTML/CSSを超リッチな表現力を持つプログラミング言語で記述していくようなイメージになります。かなりリッチなものになるので全然違うように見えるかも知れませんが、本質的にはあまり変わりません。気楽に書いていく感じでOKです。

Widget(ウィジェット)

Flutterで作成されたアプリケーションの画面に出力されている全てはWidgetです。ボタンやテキストフィールドなどのUIパーツや、これらパーツを置く基盤となるページも全てWidgetです。

プロジェクトを新規に作ったときにデフォルトでmain.dartに書かれる雛形は下記のコードから始まります。

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    ...
    ...