【Flutter】ウィジェットが端末サイズを超えたらスクロールさせる方法

2021年2月25日2022年11月14日

Flutterでレイアウトを組む際、ウィジェットサイズの合計が端末サイズを超えてしまうと、黄色と黒の縞模様が現れてしまいます。

この現象を防ぐには、SingleChildScrollViewクラスを使う必要があるんです。

当記事では、スクロール機能を実装するための「SingleChildScrollView」について詳しく解説していきます。

SingleChildScrollViewの役割

冒頭でも触れましたが、通常Flutterにてレイアウトを組む際ウィジェットサイズの合計が端末サイズを超えると、下記画像のようになってしまいます。

ウィジェットサイズが端末サイズを超えると現れる — 端末サイズを超えると現れる黄色と黒の警告要素

SingleChildScrollViewは、上記画像のような画面外にはみ出てしまったウィジェットを、ラップ（囲う）することでスクロール可能にするウィジェットです。

上記の画面に対し、実際にSingleChildScrollViewを使ってあげると、しっかりスクロールされることが確認できます。

SingleChildScrollViewで縦スクロールさせる — SingleChildScrollViewを使うと、ウィジェットが端末外にはみ出た場合スクロールできる

SingleChildScrollViewの主要プロパティ一覧

下記にSingleChildScrollViewの主要プロパティをまとめました。

より詳細な説明やその他全てのプロパティを知りたい方は、公式ドキュメントよりご覧下さい。

プロパティ	意味
child → Widget	スクロールさせる子ウィジェット
clipBehavior → Clip	クリッピングを指定
controller → ScrollController	スクロール位置などを取得
dragStartBehavior → DragStartBehavior	スクロールドラッグ開始時の挙動を指定
padding → EdgeInsetsGeometry	パディングを指定
physics → ScrollPhysics	最大スクロール範囲に達した時、スクロールを停止した時などの挙動を指定
primary → bool	プライマリーなスクロールビューの指定
reverse → bool	スクロールの開始位置を逆にする
scrollDirection → Axis	スクロールの向き（横・縦）を指定

SingleChildScrollViewの主要プロパティ

SingleChildScrollViewの具体的な使い方

ウィジェットを縦にスクロールさせる

サイズオーバーしたウィジェットを縦にスクロールさせたい場合、SingleChildScrollViewでスクロールさせたいウィジェットをラップするだけで、縦スクロール化を行うことができます。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DEMO'),
      ),
      body: Center(
        child: SingleChildScrollView( // SingleChildScrollViewで子ウィジェットをラップ
          child: Column(
            children: [
              myContainer(color: Colors.blue, text: 'START'),
              myContainer(color: Colors.orange),
              myContainer(color: Colors.red),
              myContainer(color: Colors.blue),
              myContainer(color: Colors.orange),
              myContainer(color: Colors.red, text: 'END'),
            ],
          ),
        ),
      ),
    );
  }
}

Widget myContainer({double size = 300, Color color, String text = ''}) {
  return Container(
    color: color,
    width: size,
    height: size,
    child: Center(
      child: Text(
        text,
        style: TextStyle(
            fontSize: 48,
            fontWeight: FontWeight.bold,
            color: Colors.white
        ),
      ),
    ),
  );
}

ウィジェットを横にスクロールさせる

サイズオーバーしたウィジェットを横にスクロールさせたい場合は、SingleChildScrollViewでウィジェットをラップした上で、scrollDirectionプロパティを使って「Axis.horizontal」を指定してあげる必要があります。

SingleChildScrollViewで横スクロールさせる — Axis.horizontalを指定してウィジェットを横スクロールさせる

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DEMO'),
      ),
      body: Center(
        child: SingleChildScrollView( // SingleChildScrollViewで子ウィジェットをラップ
          scrollDirection: Axis.horizontal, // スクロールの向きを水平方向に指定
          child: Row(
            children: [
              myContainer(color: Colors.blue, text: 'START'),
              myContainer(color: Colors.orange),
              myContainer(color: Colors.red),
              myContainer(color: Colors.blue),
              myContainer(color: Colors.orange),
              myContainer(color: Colors.red, text: 'END'),
            ],
          ),
        ),
      ),
    );
  }
}

Widget myContainer({double size = 300, Color color, String text = ''}) {
  return Container(
    color: color,
    width: size,
    height: size,
    child: Center(
      child: Text(
        text,
        style: TextStyle(
            fontSize: 48,
            fontWeight: FontWeight.bold,
            color: Colors.white
        ),
      ),
    ),
  );
}