2025/6/25

【Flutter/Dart】SingleChildScrollViewでスクロール領域を実装する方法！

この記事からわかること

Flutter/Dartでスクロール領域の実装方法
SingleChildScrollViewの使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Meerkat
Xcode：16.3
Flutter：3.29.2
Dart：3.7.2
Mac M1：Sequoia 15.4

Flutterでスクロール可能なViewを実装する

アプリケーションでコンテンツ量が多い場合に便利なスクロール領域をFlutterで実装する方法は以下の3通りあります。

SingleChildScrollView
ListView
CustomScrollView

今回は「SingleChildScrollView」の使い方や特徴などをまとめていきたいと思います。

SingleChildScrollView

SingleChildScrollViewはchildに指定した子Viewをスクロール可能にするシンプルなスクローラブルWidgetです。デフォルトでは縦スクロールになっており、1つの子Viewしか指定できないため、ColumnやRowと組み合わせて使用します。

SingleChildScrollView(
  child: Column(
    children: [
      FlutterLogo(
        size: 400,
        style: FlutterLogoStyle.markOnly,
      ),
      FlutterLogo(
        size: 400,
        style: FlutterLogoStyle.markOnly,
      ),
      FlutterLogo(
        size: 400,
        style: FlutterLogoStyle.markOnly,
      ),
    ],
  ),
)

また特徴として子Viewが親領域をはみ出すようであればスクロール可能に、親領域より小さければスクロール不可に自動調整してくれるようになっています。画面サイズの小さい端末で見切れてしまうといったことが発生しなくなり、大きい端末にも影響を与えないので非常に活用できるWidgetになっています。

Spacerを使うとViewが消えてしまう

SingleChildScrollViewの子要素の中にSpacerやExpanded(サイズ指定なし)を使用すると最大までビューが広がってしまうため、View自体がうまく表示されなくなってしまうので注意してください。

SingleChildScrollView(
  child: Column(
    children: [
      FlutterLogo(
        size: 400,
        style: FlutterLogoStyle.markOnly,
      ),
      // ✖︎ これはNG
      Spacer(),
      // ✖︎ これもNG
      Expanded(child: Container(color: Colors.black, width: 50)),
      FlutterLogo(
        size: 400,
        style: FlutterLogoStyle.markOnly,
      ),
    ],
  ),
)

横スクロールにする

横スクロールにしたい場合はscrollDirectionにAxis.horizontalを指定します。子要素にもRowなどを使用して横並びになるようにしておく必要があります。

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      FlutterLogo(
        size: 400,
        style: FlutterLogoStyle.markOnly,
      ),
      FlutterLogo(
        size: 400,
        style: FlutterLogoStyle.markOnly,
      ),
    ],
  ),
)

パフォーマンスの問題

SingleChildScrollViewでは表示されていないViewも描画が行われます。例えばスクロールコンテンツが膨大な場合に最初に全てのViewの描画が実行されるため挙動が重くなってしまう可能性があります。

ListViewであれば表示されているViewだけに描画処理を実行させることが可能になっているのでコンテンツが多い場合はListViewを使用することが推奨されています。

スクロールバーを表示する

デフォルトではスクロール領域をスクロールした際にスクロールバーが表示されません。明示的に表示させるにはSingleChildScrollViewをScrollbarでラップします。それだけで以下のようなスクロールバーが表示されるようになります。

Scrollbar(
    child: SingleChildScrollView(
      child: Column(
        children: [
          FlutterLogo(
            size: 400,
            style: FlutterLogoStyle.markOnly,
          ),
          FlutterLogo(
            size: 400,
            style: FlutterLogoStyle.markOnly,
          ),
          FlutterLogo(
            size: 400,
            style: FlutterLogoStyle.markOnly,
          ),
        ],
      ),
    )
)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。