[Flutter]お気に入りボタンを押した際に、リストの全てにお気に入りマークがついてしまう。

Question

リスト内のお気に入りボタンを押したところ、現状全てのリストにお気に入りマークがついてしまうので、それを個別につくようにしたいと思っております。[画像参照]

現状ハートボタンを押すと、ハートON/OFFは切り替わりますが、全てのハートマークが同時にトグルされてしまいます。
Widgetsを分けてみたりしたのですが、結果は同じでどうしても一つ一つにON/OFFを実装することができません。
Flutter自体が始めたばかりで理解がまだよくできていないのですが、どなたかわかる方はいらっしゃいますでしょうか。

![]

↓リストのCardのwidgetです。

class ListCards extends StatelessWidget {
  var name;
  ListCards({@required this.name});

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          gradient: LinearGradient(
            colors: [
              Colors.lightBlue,
              Colors.lightBlueAccent,
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: ListTile(
          contentPadding:
          EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
          onTap: () {
            Navigator.of(context).pushNamed(
              SentencesScreen.routeName,
              arguments: {
                'id': name.id.toString(),
                'title': name.title.toString(),
              },
            );
          },
          leading: Text(
            name.id + '.',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          title: Container(
            child: Text(
              name.title,
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          trailing: Material(
            color: Colors.transparent,
            child: Consumer<Course>(
              builder: (context, color, _) => IconButton(
                icon: Icon(color.isFavorite
                    ? Icons.favorite
                    : Icons.favorite_border),
                iconSize: 40,
                autofocus: true,
                highlightColor: Colors.pinkAccent,
                hoverColor: Colors.pink,
                onPressed: () {
                  color.favoriteToggle();
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

↓ここでListViewをビルドしています。

class CourseList extends StatelessWidget {
  var name;
  CourseList({@required this.name});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: name.length,
      itemBuilder: (context, index) {
        return ListCards(name: name[index]);
      }
    );
  }
}

↓各コースのmodelとお気に入りのの動作を調整しています。

class Course with ChangeNotifier {
  final String id;
  final String title;
  final Color color;
  bool isFavorite;

  Course({
    @required this.id,
    @required this.title,
    this.color = Colors.blue,
    this.isFavorite = false,
  });

  void favoriteToggle() {
    isFavorite = !isFavorite;
    notifyListeners();
  }
}

Answer 1

ListCards内でConsumer<Course>を実行していますが、ChangeNotifierProviderが適切な位置にないため、お気に入りボタンの状態が共用されてしまっているんだと思います。

掲載されたコードには、ChangeNotifierProviderがないので、どのようにCourseを渡しているかわかりませんが、以下のようにCourseListからListCardsを呼び出す際に、ChangeNotifierProviderで状態を渡せばうまくいくと思います

class CourseList extends StatelessWidget {
  var name;
  CourseList({@required this.name});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: name.length,
        itemBuilder: (context, index) {
          return ChangeNotifierProvider<Course>.value(
            value: name[index],
            child: ListCards(name: name[index]),
          );
        });
  }
}

一応、動作確認したコード全部も貼っておきます

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Container(
        child: CourseList(name: Courses().list),
      ),
    );
  }
}

class ListCards extends StatelessWidget {
  var name;
  ListCards({@required this.name});

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          gradient: LinearGradient(
            colors: [
              Colors.lightBlue,
              Colors.lightBlueAccent,
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: ListTile(
          contentPadding:
              EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0),
          onTap: () {
            Navigator.of(context).pushNamed(
              'SentencesScreen.routeName', // XXX
              arguments: {
                'id': name.id.toString(),
                'title': name.title.toString(),
              },
            );
          },
          leading: Text(
            name.id + '.',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          title: Container(
            child: Text(
              name.title,
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          trailing: Material(
            color: Colors.transparent,
            child: Consumer<Course>(
              builder: (context, color, _) => IconButton(
                icon: Icon(
                    color.isFavorite ? Icons.favorite : Icons.favorite_border),
                iconSize: 40,
                autofocus: true,
                highlightColor: Colors.pinkAccent,
                hoverColor: Colors.pink,
                onPressed: () {
                  color.favoriteToggle();
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class CourseList extends StatelessWidget {
  var name;
  CourseList({@required this.name});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: name.length,
        itemBuilder: (context, index) {
          return ChangeNotifierProvider<Course>.value(
            value: name[index],
            child: ListCards(name: name[index]),
          );
        });
  }
}

class Courses {
  final List<Course> list = [
    Course(id: 'b1', title: '自己紹介をしよう'),
    Course(id: 'b2', title: '宿にチェックインしよう'),
    Course(id: 'b3', title: '空港で英会話'),
    Course(id: 'b3', title: 'カフェで注文'),
  ];
}

class Course with ChangeNotifier {
  final String id;
  final String title;
  final Color color;
  bool isFavorite;

  Course({
    @required this.id,
    @required this.title,
    this.color = Colors.blue,
    this.isFavorite = false,
  });

  void favoriteToggle() {
    isFavorite = !isFavorite;
    notifyListeners();
  }
}

---

おまけ：似たようなことをやろうとしている記事を見つけたので参考に貼っておきます。

Comments

[namihana]

ご回答大変ありがとうございました！ChangeNotifierProviderでvalueを渡すというところがすっかり抜けておりました。無事動作させることができました。数日悩んでいたのでとても助かりました。
ありがとうございます。m(__)m