FlutterでList View Builderを使用する方法

以下に、List View Builderを使用してリストを作成する手順とコード例を示します。

List<String> articles = [
  "記事1",
  "記事2",
  "記事3",
  // 他の記事を追加
];

2. List View Builderウィジェットを使用してリストを作成します。List View Builderは、itemBuilderコールバックを指定し、各アイテムの表示方法を定義します。

ListView.builder(
  itemCount: articles.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(articles[index]),
    );
  },
);

上記の例では、itemCountプロパティにリストの要素数を指定し、itemBuilderコールバックでは、各アイテムをListTileウィジェットとして表示しています。

3. リストを画面上に表示します。例えば、ScaffoldウィジェットのbodyプロパティにList View Builderを配置します。

Scaffold(
  appBar: AppBar(
    title: Text("ブログ投稿"),
  ),
  body: ListView.builder(
    itemCount: articles.length,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(
        title: Text(articles[index]),
      );
    },
  ),
);

上記の例では、Scaffoldウィジェットを使用して基本的なアプリケーションのフレームを作成し、List View Builderをbodyプロパティに配置しています。

これで、List View Builderを使用してリストを作成する方法がわかりました。必要に応じてデータソースや表示方法をカスタマイズすることができます。これにより、シンプルで効率的なリスト表示が実現できます。