Flutterにて『The overflowing RenderFlex has an orientation of Axis.horizontal.』が出た時の対処法

Flutter

2022.06.03 2021.09.28

環境
問題
解決方法

環境

macOS Big Sur Version 11.5.2
Flutter 2.2.3
Xcode 12.5.1

問題

Flutterでアプリを構築中に以下のようなエラーが発生。

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

アプリ自体は動いているが、虎柄で変なテープが画面に貼ってあるのがわかる。

実はここにてエラーが出ているということを伝えているのがトラ柄のテープみたいです。

エラーの内容を見てみると、描画する内容がオーバーフローしているとと言っている。

確かにトラ柄のテープ部分を見てみると、『Digital Storage』という文字の最後の方が切れており、スクロールによってもみることができない。

画面のソースコード

Widget build(BuildContext context) {
    // TODO: Build the custom widget here, referring to the Specs.
    return Material(
      color: Colors.greenAccent,
      child: Container(
        height: 100.0,
        child: InkWell(
          borderRadius: BorderRadius.circular(100.0 / 2),
          highlightColor: color,
          onTap: () {
            print("pressed!");
          },
          child: Padding(
            padding: EdgeInsets.all(8.0),
            // child: SingleChildScrollView(
            //   scrollDirection: Axis.horizontal,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(
                    icon,
                    size: 60.0,
                  ),
                ),
                Center(
                  child: Text(
                    name,
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.headline3,
                  ),
                )
              ],
            ),
            // ),
          ),
        ),
      ),
    );

解決方法

回避策として、横方向へのスクロールを可能にしてあげることでエラーがなくなった。

スクロール可能にするコードは以下の、『SingleChildScrollView, scrollDirection』部分です。

child: Padding(
            padding: EdgeInsets.all(8.0),
            child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Icon(
                    icon,
                    size: 60.0,
                  ),
                ),
                Center(
                  child: Text(
                    name,
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.headline3,
                  ),
                )
              ],
            ),
            ),
          ),

画面上にもトラ柄がなくなっていることがわかります！