【Flutter】ListTileの基本実装と商品一覧画面作成までの完全ガイド！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListTileの基本実装'),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map), // 1行目: アイコン設定
              title: Text('タイトル'), // 2行目: タイトルテキスト
              subtitle: Text('サブタイトル'), // 3行目: サブタイトルテキスト
              trailing: Icon(Icons.navigate_next), // 4行目: 末尾のアイコン
              onTap: () {
                // 5行目: タップしたときの動作
                print('ListTileタップ！');
              },
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('商品一覧'),
        ),
        body: ListView.builder(
          itemCount: 10, // 1行目: 商品の数を指定
          itemBuilder: (context, index) {
            return Card( // 2行目: Cardウィジェットを使用
              child: ListTile(
                leading: Icon(Icons.image), // 3行目: 商品画像を想定したアイコン
                title: Text('商品名 $index'), // 4行目: 商品名
                subtitle: Text('商品説明 $index'), // 5行目: 商品説明
                trailing: Icon(Icons.shopping_cart), // 6行目: ショッピングカートアイコン
              ),
            );
          },
        ),
      ),
    );
  }
}