【Flutter】【エラー対応】「A RenderFlex overflowed by pixels on the bottom」または「BOTTOM OVERFLOWED BY PIXELS」が発生する原因と対処法

今回はFlutterアプリ開発時に遭遇することのある「A RenderFlex overflowed by * pixels on the bottom」または「BOTTOM OVERFLOWED BY * PIXELS」（どちらも同じ意味）というエラーについて原因と対処法を解説します。（*には数字が入る）

この記事で分かること

✅「A RenderFlex overflowed by pixels on the bottom」が発生する理由
✅「A RenderFlex overflowed by pixels on the bottom」の対処方法

目次

「A RenderFlex overflowed by pixels on the bottom」エラーの原因

端的に言うとこのエラーは「ウィジェットのサイズが画面範囲を超えたとき」に起こるエラーです。例えば、スクロールが実装されていない画面でTextFieldなどのウィジェットで複数行の文字を入力したときに画面範囲が越え、エラーとなる場合があります。

エラーを起こす例

画面

画像1

コード

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const <Widget>[
          Text("テスト"),
          TextField(
            keyboardType: TextInputType.multiline,
            maxLines: null,
          ),
          FlutterLogo(),
        ],
      ),
    );
  }
}

説明

一つのColumnの中に「Text」「TextField」「FlutterLogo」の3つのウィジェットがあります。アプリ起動時（左画像）には特に異常はないと一見なると思いますが、右画像のようにTextFieldで改行を繰り返していくと、「BOTTOM OVERFLOWED BY 43 PIXCEL」と表示されました。

これが画面の範囲を超えてしまったということです。

「A RenderFlex overflowed by pixels on the bottom」エラーの対処方法

対処法はいたってシンプルです。画面範囲を超えたらエラーになるということは、画面範囲を超えてしまったらスクロールができるように変更すればこのエラーは起きなくなる、ということです。

具体的には上記のコードを以下のように変更します。

エラー対処後のコード

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(//これで包み込む！！
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text("メモ"),
            TextField(
              keyboardType: TextInputType.multiline,
              maxLines: null,
            ),
            FlutterLogo(),
          ],
        ),
      ),
    );
  }
}

エラー対処後の画面

画像2

変更点

変更点は「SingleChildScrollView」を追加していることです。Columnを包み込む形です。これだけでエラーは解消されます。

SingleChildScrollViewについては以下記事を参考にしてください。

その他の対処法

他にはScaffoldウィジェットのresizeToAvoidBottomInsetプロパティを「false」に変更することでも解消できることがあります。以下のように記述します。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,//ここを追加！
      ・・・・・・

ただしこの方法だとFlutterアプリが自動で画面サイズの調整をしてくれなくなるため、キーボードとウィジェットがかぶってもいい場合など、使用用途は限られると思います。

まとめ

今回は「A RenderFlex overflowed by pixels on the bottom」「BOTTOM OVERFLOWED BY * PIXELS」が発生する原因とその対処法についてでした。この機会に理解を深めていきましょう！

以上となります、最後までお読みいただきありがとうございました！