Zenn
🎹

Flutter - 画面最下部に固定されるテキストフォームをサクッと実装したい

に公開
Flutter
tech

はじめに

こんにちは
業務でFlutterを使っていますイノウエと申します

最近は投稿のハードルを下げる目的でサクッと書くことを意識しております
最低限の構成になっているので、足らぬ点などあれば優しくご指摘いただけますとです…🤲🏻

今回は…タイトルの通りでございやす

やること

チャットアプリなどで画面の最下部にテキストフォームを固定しておきたい場合があると思います。

実装時に意外と「どうやって固定する？」「キーボード出現時にキーボードで隠れちゃう？」など出てくるかなと思い、こんな要素でやると良さそうというのを紹介いたします。

あくまで一例なので、他に良い方法はたくさんあると思います。
ぜひコメント欄でもご紹介していただけると嬉しいです！

アウトプットイメージ

実装

端的に言うとColumn()内で要素を並べ、メインのコンポーネント（ここではチャットの発言画面）をExpanded()でラップするだけです。
例として、ヘッダー/メイン/テキストフィールドみたいな要素を以下の感じに。

Column(
  children: [
    HeaderComponent(),
    Expanded(child: MainComponent()), //Expandedでラップする
    TextFormComponent(),
  ],
)

Expanded()でラップすることでMainComponent()が可能な限り広がろうとし、HeaderComponent()とTextFormComponent()以外の空間を`埋めてくれるくれるイメージです。

Expandedクラスについてはこちら↓
https://api.flutter.dev/flutter/widgets/Expanded-class.html

実装例

コピペで使えます

class ChatPage extends StatelessWidget {
  const ChatPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chat View'),
      ),
      body: Column(
        children: [
          const Expanded(child: SomethingListViewComponent()),
          SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: '何か打ってみる？',
                  suffixIcon: Icon(Icons.send),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class SomethingListViewComponent extends StatelessWidget {
  const SomethingListViewComponent({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 100,
      itemBuilder: (context, index) => ListTile(
        title: Text(
          '発言 $index',
          textAlign: index.isOdd ? TextAlign.end : TextAlign.start,
        ),
      ),
    );
  }
}

ひとこと

このボリュームでも小一時間程度はかかってしまうんだなあ🫠

Discussion