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

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

## ListViewって何？ 🤔

スマホアプリでよく見かける「スクロールできるリスト」、これを作るのが`ListView`です！
例えば：
- LINEのメッセージ一覧
- Twitterのタイムライン
- 設定画面のメニュー

## ListViewを作る3つの方法 🎨

### 1. シンプル方式（ListView）
少ない項目を表示するのに最適！

```dart
ListView(
  children: [
    Text('項目1'),
    Text('項目2'),
    Text('項目3'),
  ],
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/8caf70f1-f7ba-dcae-27bb-4b5aea277de9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/8aca95c7-bb22-e67d-8f6f-bd7349972f36.png)


使い道：
- 設定メニュー
- 固定の選択肢リスト
- 短いリスト


### 2. ビルダー方式（ListView.builder）
たくさんの項目や無限スクロールに最適！

```dart
ListView.builder(
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('メッセージ $index'),
    );
  },
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/54935fd1-0c29-34ba-1906-7a4a86fa70d9.png)



使い道：
- チャットメッセージ
- SNSのタイムライン
- 検索結果一覧

### 3. 区切り線付き方式（ListView.separated）
項目の間に何か挟みたいときに最適！

```dart
ListView.separated(
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('項目 $index'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider(color: Colors.blue);  // 青い線を挟む
  },
  itemCount: 10,  // 10項目表示
)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/6adece82-a70b-03ff-f834-1b2c9e229819.png)





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

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

```dart
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('タップされました！');
      },
    ),
  ],
)
```

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

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

## やってみよう！ 💪

1. シンプルなメニューを作る
```dart
ListView(
  children: [
    ListTile(title: Text('メニュー1')),
    ListTile(title: Text('メニュー2')),
    ListTile(title: Text('メニュー3')),
  ],
)
```

2. 無限スクロールを作る
```dart
ListView.builder(
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('項目 $index'),
    );
  },
)
```

3. おしゃれな区切り線を入れる
```dart
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）

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

## 応用テクニック 🚀

1. プルダウンで更新
```dart
RefreshIndicator(
  child: ListView.builder(
    itemBuilder: (context, index) {
      return ListTile(title: Text('項目 $index'));
    },
  ),
  onRefresh: () async {
    // 更新の処理
  },
)
```

2. アニメーション付きの追加
```dart
ListView.builder(
  itemBuilder: (context, index) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      child: ListTile(title: Text('項目 $index')),
    );
  },
)
```