【Flutter】画面構成の基礎:Scaffoldとは

この記事について

こんにちは。
最近Flutterを勉強し始めました。
手始めにサンプルコードを見ていたら、Viewの中に「Scaffold」というワードがいきなり出現..
馴染みのない言葉でしたが、これは必履修系な気がするので調べてまとめていきます。

結論: Scaffoldとは

Scaffoldとは、
画面の最上位グループであり、アプリの画面の土台のようなものです。
画面全体の描画可能範囲を取得してくれますし、
便利なUIパーツも提供してくれて、そのパーツを自動的にいい感じに配置してくれます。

The Scaffold is designed to be a top level container for a MaterialApp.
Creates a visual scaffold for Material Design widgets.

https://api.flutter.dev/flutter/material/Scaffold-class.html

Scaffoldの使い方

先ほどのFlutter公式リンクの先に、Scaffoldのデモがあります。
画面:

コード(一部抜粋):

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(child: Text('You have pressed the button $_count times.')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }

3行目にScaffoldが出てきました。
その中に3つの要素がありますね。

• appBar
• body
• floatingActionButton

大体想像つくと思いますが、それぞれの要素はこちらです。
appBar:

body:

floatingActionButton:

これらの中にもまたTextやIconといった要素があって、
細かいUI調整を行えます。
Scaffoldという大項目があって、
その中にappBarやbodyなどの中項目、
さらにその中でTextやIconなどの設定が行える、といった階層的なイメージです。
最後にビューを返す時には、Scaffold自体を返してあげます。

最後に

Scaffoldは画面を実装する際、型のように覚えてしまっていい気がします。
Scaffoldを使うと、ある程度の画面のクオリティまで持っていくのが楽ですね。

また、コードと画面を見比べてみると、
UIパーツのハンドリングがかなり楽だというのもわかります。
パーツの配置にうなされるなんてこともなさそうだし、
改修となった場合のメンテナンスや、変更したことによる影響調査も比較的楽そうです。

自分はCSSが理由でUIが苦手だったんですけど、ウィジェットが使えるFlutterなどのFWを選べば多少苦手意識が薄まる気がしました。

引き続きFlutterを勉強していきます。