〜 無料体験可能なプログラミングスクールはコチラ 〜

Flutter

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

ウィジェットをスクロールさせる方法

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

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

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

SingleChildScrollViewの役割

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

ウィジェットサイズが端末サイズを超えると現れる端末サイズを超えると現れる黄色と黒の警告要素

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

上記の画面に対し、実際に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でスクロールさせる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」を指定してあげる必要があります。

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
        ),
      ),
    ),
  );
}

最後に

当記事では、Flutterでウィジェットのスクロールを実装する方法をご紹介しました。

最後に内容を簡潔にまとめると、

まとめ

  • 縦スクロールさせる場合は「SingleChildScrollView」で対象をラップする
  • 横スクロールさせる場合は対象をラップした上「Axis.horizontal」を指定する

ということになります。

ユウマ
Flutterでは簡単にスクロール実装できて、大変便利ですね...!それではまたっ!

-Flutter

© 2021 ユウマのブログ