[Flutter]リストビュー(ListView)の要素を中央に表示するには？

どうも、ちょげ(@chogetarou)です。

リストビューの要素を中央に表示する方法を紹介します。

方法

リストビューの要素を中央に表示する方法は２つあります。

Center

１つは、Centerを使う方法です。

リストビューの要素をCenterの「child」に指定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Center(
      child: /*Item*/,
    );
  },
),

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return Center(
            child: Text('$index'),
          );
        },
        itemExtent: 50,
      ),
    );
  }

Algin

もう１つは「Align」を使う方法です。

まず、リストビューの要素をAlignのchildに指定します。

そして、Alignの引数「alignment」に「Alignment.center」

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Align(
      alignment: Alignment.center,
      child: /*Item*/,
    );
  },
),

まとめ

リストビューの要素を中央に表示するには、CneterもしくはAlignを使います。