DartでListViewを書く書き方を調べましたので、サンプルを置いていきます。
ListViewとはSwiftでいうとUITableViewのようにセルをリスト形式で表示するViewです。
とりあえず初級ということで基本中の基本を１つ載せてみました。


libからのフォルダ構成はこちらのようにしております。


main.dart

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'view/item_list_view.dart';

import 'viewmodel/item_list_view_model.dart';



void main() {

  runApp(const MyApp());

}



class MyApp extends StatelessWidget {

  const MyApp({super.key});



  @override

  Widget build(BuildContext context) {

    return ChangeNotifierProvider(

      create: (_) => ItemListViewModel(),

      child: MaterialApp(

        title: 'MVVM ListView Example',

        theme: ThemeData(

          primarySwatch: Colors.blue,

        ),

        home: const ItemListView(),

      ),

    );

  }

}

item.dart

class Item {

  final String title;



  Item(this.title);

}

 

item_list_view_model.dart

import 'package:flutter/material.dart';

import '../model/item.dart';



class ItemListViewModel extends ChangeNotifier {

  final List<Item> _items = List<Item>.generate(50, (i) => Item("Item $i"));



  List<Item> get items => _items;

}

 

item_list_view.dart

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import '../viewmodel/item_list_view_model.dart';



class ItemListView extends StatelessWidget {

  const ItemListView({super.key});



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        // アプリバーのタイトルを設定

        title: const Text('Scrollable ListView'),

      ),

      body: Column(

        children: [

          // Expandedウィジェットを使ってListViewに利用可能なスペースを確保

          Expanded(

            child: Consumer<ItemListViewModel>(

              // Consumerを使って、ItemListViewModelのデータを取得

              builder: (context, viewModel, child) {

                return ListView.builder(

                  itemCount: viewModel.items.length,

                  itemBuilder: (context, index) {

                    final item = viewModel.items[index];

                    return Container(

                      // 各リストアイテムに下線を追加

                      decoration: const BoxDecoration(

                        border: Border(

                          bottom: BorderSide(color: Colors.grey),

                        ),

                      ),

                      child: ListTile(

                        title: Text(item.title),

                        tileColor: Colors.blue[50],  // リストアイテムの背景色

                        contentPadding: const EdgeInsets.symmetric(

                          horizontal: 16.0,

                          vertical: 8.0,

                        ),

                        // onTapでリストアイテムがタップされたときの処理を定義

                        onTap: () {

                          // 行のタップ時の処理

                          print("Item ${item.title} tapped");

                        },

                      ),

                    );

                  },

                );

              },

            ),

          ),

        ],

      ),

    );

  }

}

実行結果


DartではPrint関数を書くと動くけど注意が出てしまう状態になるとのことです。
もしも値を使うのであればlogで書けと言ってきます。
今回はサンプルでタップした箇所をプリント関数でターミナルに表示するようにしております。
次回はこの書き方をベースにして複数行とか、テキストの長さによって行の高さを調整する方法を調べて載せます。