【Flutter】Scrollableな領域と固定footerの構造

動作環境

Flutter 2.10.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5464c5bac7 (5 weeks ago) • 2022-04-18 09:55:37 -0700
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

固定Footer

footerの位置を固定して、それ以外の要素は必要あればスクロールできるUIの実装が必要そうだったので実装しようとしたら、意外に悩んでしまったので備忘録がてら記載。

sample.dart

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('fixed footer'),
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    _buildHeader(),
                    _buildBody(),
                  ],
                ),
              ),
            ),
            _buildFooter(context),
          ],
        ),
      ),
    );
  }

書いてみるとシンプルな話で、footer意外のスクロールさせる領域は、Expanded > SingleChildScrollViewの下に書いてやれば良い。
headerも固定したいなら、body部分のみSingleChildScrollViewの下に書いてやれば良い。

pageとmodalのコードの全容は、🔗から飛べる

page 🔗	modal 🔗