[Flutter]縦スクロールと横スクロールをする方法

はじめに

今回は多くのアプリには欠かせないスクロールができるようにするための方法について書いていきたいと思います。みなさんがよく見かける縦スクロールだけでなく、横スクロールについても調べてみました。

SingleChildScrollView

SingleChildScrollView は child の中に Column や Row を入れることで、含まれたWidgetはスクロールができるようになります。この中に入っているものはすべて描画してくれるので、一度情報を読み込んでしまえば、スクロールした際にいちいち読み込まなくてすみます。
以下はそのコードの例です。

SingleChildScrollView(
  child: const Column(
    children: [
      Text('おはよう'),
      Text('こんにちは'),
      Text('こんばんは'),
    ]
  )
);

ListView

ListView でも同じようにスクロールを実装することができるのですが、これは children の中にWidgetを入れることでデフォルトで縦方向にスクロールができるようになります。
初めに描画された際は見える部分とその前後のみで、見えなくなれば一度破棄されてしまうため、スクロールして画面を動かしたらそのたびに画面を描画するという特徴があります。
以下はそのコードの例です。

ListView(
  children: [
    Text('おはよう'),
    Text('こんにちは'),
    Text('こんばんは'),
  ],
)

ListView にもさまざまな種類があるようです。

ListView.builder

これは多くのWidgetを並べてスクロールしたい際に役に立つWidgetです。
itemCount というものを使うことで見やすくて楽なコードを書くことができます。
以下はそのコード例です。

ListView.builder(
  itemCount: 47,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(prefectures[index]),
    );
  },
)

ListView.separated

これは並べたWidgetにそれぞれ区切り線をいれることができるWidgetです。
書き方はほとんど ListView.builder と同じですが、separatorBuilder を使います。
以下はそのコードの例です。

ListView.separated(
  itemCount: 47,
  itemBuilder: (context, index) {
    return ListTile(title: Text(prefectures[index]));
  },
  separatorBuilder: (context, index) => Divider(),
)

横スクロール

横スクロールするには、scrollDirection というものを使います。
例のような一文を加えることで横向きスクロールができるようになります。
以下はそのコードの例です。

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(width: 100, color: Colors.red),
    Container(width: 100, color: Colors.blue),
    Container(width: 100, color: Colors.yellow),
  ],
)

最後に

今回はスクロールする方法についてまとめてみました。
アプリ開発を今後していくならスクロールの実装は避けては通れないので、どれを使うのが適切なのかきちんとそれぞれの特徴をつかんだ上で使用していきたいと思います。