Flutterのチュートリアルを学んでみた(10)

ListViewをマスターしよう！スクロールの魔法 📱

ListViewって何？ 🤔

スマホアプリでよく見かける「スクロールできるリスト」、これを作るのがListViewです！
例えば：

• LINEのメッセージ一覧
• Twitterのタイムライン
• 設定画面のメニュー

ListViewを作る3つの方法 🎨

1. シンプル方式（ListView）

少ない項目を表示するのに最適！

ListView(
  children: [
    Text('項目1'),
    Text('項目2'),
    Text('項目3'),
  ],
)

使い道：

• 設定メニュー
• 固定の選択肢リスト
• 短いリスト

2. ビルダー方式（ListView.builder）

たくさんの項目や無限スクロールに最適！

ListView.builder(
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('メッセージ $index'),
    );
  },
)

使い道：

• チャットメッセージ
• SNSのタイムライン
• 検索結果一覧

3. 区切り線付き方式（ListView.separated）

項目の間に何か挟みたいときに最適！

ListView.separated(
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('項目 $index'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider(color: Colors.blue);  // 青い線を挟む
  },
  itemCount: 10,  // 10項目表示
)

かんたんメニューの作り方 🎯

ListTileを使うと、かんたんにきれいなメニューが作れます：

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.star),      // 左側のアイコン
      title: Text('お気に入り'),       // タイトル
      trailing: Icon(Icons.arrow_forward),  // 右側の矢印
      onTap: () {
        print('タップされました！');
      },
    ),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text('設定'),
      trailing: Icon(Icons.arrow_forward),
      onTap: () {
        print('タップされました！');
      },
    ),
  ],
)

横スクロールにする方法 ↔️

ListView.builder(
  scrollDirection: Axis.horizontal,  // これを追加！
  itemBuilder: (context, index) {
    return Container(
      width: 100,
      child: Center(
        child: Text('項目 $index'),
      ),
    );
  },
)

やってみよう！ 💪

1. シンプルなメニューを作る

ListView(
  children: [
    ListTile(title: Text('メニュー1')),
    ListTile(title: Text('メニュー2')),
    ListTile(title: Text('メニュー3')),
  ],
)

1. 無限スクロールを作る

ListView.builder(
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('項目 $index'),
    );
  },
)

1. おしゃれな区切り線を入れる

ListView.separated(
  itemBuilder: (context, index) {
    return ListTile(title: Text('項目 $index'));
  },
  separatorBuilder: (context, index) {
    return Container(
      height: 5,
      color: Colors.grey[200],
    );
  },
  itemCount: 10,
)

こんなときはどうする？ 🆘

• リストが表示されない
  → itemCountを確認（separatedの場合）
• スクロールできない
  → 親ウィジェットの高さを確認
• 項目がはみ出す
  → Containerで囲んでサイズを調整

ListTileでできること 🎨

1. 左側にアイコンを置く（leading）
2. 右側に矢印を置く（trailing）
3. サブタイトルを追加（subtitle）
4. タップ時の動作を設定（onTap）
5. 長押し時の動作を設定（onLongPress）

例：

ListTile(
  leading: Icon(Icons.star),
  title: Text('タイトル'),
  subtitle: Text('サブタイトル'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () => print('タップ！'),
  onLongPress: () => print('長押し！'),
)

応用テクニック 🚀

1. プルダウンで更新

RefreshIndicator(
  child: ListView.builder(
    itemBuilder: (context, index) {
      return ListTile(title: Text('項目 $index'));
    },
  ),
  onRefresh: () async {
    // 更新の処理
  },
)

1. アニメーション付きの追加

ListView.builder(
  itemBuilder: (context, index) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      child: ListTile(title: Text('項目 $index')),
    );
  },
)