🐈

【Flutter】【Widget】Scaffoldって結局なんなん?

2023/10/29に公開

はじめに

scaffoldってなにって質問を受けたのでscaffoldについて調べてみた。

結論

scaffoldは『足場』という意味があり
アプリで標準的に使われているものを簡単に実装できるWidgetです。

Scaffoldにはどんなプロパティがあるの?

よく使われているものを挙げると...

appBar
body
floatingActionButton

この3つを紹介していきます。

今後、drawer、bottmNavigationBarについても紹介していきます!

appBar

  appBar: AppBar(
        title: const Text('こんにちは'),
      ),

写真でいう赤い部分がAppBarに相当する。

body

    body: const SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              SizedBox(
                height: 200,
              ),
              InputForm(
                labelText: 'IDまたはメールアドレス',
              ),
              SizedBox(
                height: 8,
              ),
              InputForm(
                labelText: 'パスワード',
              ),
            ],
          ),
        ),
      ),

写真でいう赤い部分がbodyに相当する。

floationgActionButton

  floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),

参考文献

https://yamochun-dev.cloud/dev/flutter/about-scaffold/

Flutter大学

Discussion