Change Notifier Provider to add widget to Favourite Screen

Question

I've made screen with details of movies and with favourite movies. Also I've got a list of movies. In Detail Screen , there is favourite icon . I want to make that when you tap on this Icon, I want to add this movie to Favourite Screen .

There is a list of movies.

class Movie {
  String imgUrl;
  String title;
  String categories;
  int year;
  String country;
  int length;
  String description;
  List<String> screenshots;

  Movie({
    required this.imgUrl,
    required this.title,
    required this.categories,
    required this.year,
    required this.country,
    required this.length,
    required this.description,
    required this.screenshots,
  });
}

final List<Movie> movies = [
  Movie(
      imgUrl:
          'https://static.posters.cz/image/1300/plakaty/james-bond-no-time-to-die-profile-i114389.jpg',
      title: 'No time to die',
      categories: 'Adventure',
      year: 2021,
      country: 'USA/England',
      length: 183,
      description:
          'James Bond has left active service. His peace is short-lived when Felix Leiter, an old friend from the CIA, turns up asking for help, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.',
      screenshots: [
        'https://i.pinimg.com/originals/fd/5e/1d/fd5e1d8878c402aaba2fb6373e880b1f.webp',
        'https://cdn.mos.cms.futurecdn.net/dNmCDjJT5G76aDKiYphTkF.jpg',
        'https://i.imgur.com/Zm9X4lT.jpg',
        'https://images.complex.com/complex/images/c_fill,f_auto,g_center,w_1200/fl_lossy,pg_1/knie3z7uwe3inyua5kft/no-time-to-die-04'
      ]),
]

There I've got Detail Screen.

class MovieScreen extends StatefulWidget {
  final String photo, title, categories, country, description;
  final int year, length;
  final List<String> screenshots;
  const MovieScreen(
      {Key? key,
      required this.photo,
      required this.title,
      required this.categories,
      required this.year,
      required this.country,
      required this.description,
      required this.length,
      required this.screenshots})
      : super(key: key);
  @override
  _MovieScreenState createState() => _MovieScreenState();
}

class _MovieScreenState extends State<MovieScreen> {
  @override
  Widget build(BuildContext context) {
    final filmData = Provider.of<MovieProvider>(context);
    final films = filmData.items;
    return Scaffold(
      backgroundColor: Colors.white,
      body: ListView(
        children: [
          Stack(
            children: [
              Container(
                transform: Matrix4.translationValues(0, -50, 0),
                width: double.infinity,
                child: Hero(
                  tag: widget.photo,
                  child: ClipShadowPath(
                    clipper: CircularClipper(),
                    shadow: Shadow(blurRadius: 20),
                    child: Image(
                      height: 400,
                      image: NetworkImage(widget.photo),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                    padding: EdgeInsets.only(left: 20),
                    onPressed: () => Navigator.pop(context),
                    icon: Icon(Icons.arrow_back),
                    iconSize: 40,
                  ),
                  IconButton(
                    padding: EdgeInsets.only(right: 20),
                    onPressed: () {},
                    icon: Icon(Icons.favorite_outline),
                    iconSize: 30,
                    color: Colors.red,
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

There is Favourite Screen.

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  @override
  Widget build(BuildContext context) {  
    return Scaffold(
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Navbar1(),
          Container(
            width: MediaQuery.of(context).size.width - 60,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: ListView(
                children: <Widget>[
                  SizedBox(
                    height: 50,
                  ),
                  HeadMenuMylist(),
                  SizedBox(
                    height: 20,
                  ),
                  GridView.count(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10,
                    crossAxisCount: 2,
                    childAspectRatio: 1 / 2,
                    children: [
                      Stack(
                        children: [
                          Positioned.fill(
                            child: Container(
                              height: 200,
                              foregroundDecoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                gradient: LinearGradient(
                                  begin: Alignment.topCenter,
                                  end: Alignment.bottomCenter,
                                  colors: [Colors.transparent, Colors.black],
                                ),
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(10),
                                child: Image.network(imgUrl
                                  ,
                                  loadingBuilder: (BuildContext context,
                                      Widget child,
                                      ImageChunkEvent? loadingProgress) {
                                    if (loadingProgress == null) return child;
                                    return Center(
                                      child: SizedBox(
                                        height: 50,
                                        width: 50,
                                        child: CircularProgressIndicator(
                                          strokeWidth: 4,
                                          color: Colors.red,
                                        ),
                                      ),
                                    );
                                  },
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(bottom: 15),
                            child: Align(
                              alignment: Alignment.bottomCenter,
                              child: Text(
                                'Peaky Blinders',
                                style: GoogleFonts.openSans(
                                    color: Colors.white,
                                    fontSize: 18,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 10, right: 10),
                            child: Align(
                                alignment: Alignment.topRight,
                                child: GestureDetector(
                                  onTap: () {},
                                  child: Icon(
                                    Icons.delete,
                                    color: Colors.white,
                                  ),
                                )),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I tried with Change Notifier Provider but it doesn't work and I don't have clue why it didn't work. Is there something else I can use instead Change Notifier Provider ?

Thanks for help.

Answer 1

if you want to save the favorite movie of a user permanently, then you have to save the JSON data in firestore database.

1. Create a function to store the favorite movie json data to firestore, i,e, store the json data to collection like;

    saveFavrotiesMovies() async { final User user = auth.currentUser; final uid = user.uid; try { await FirebaseFirestore.instance.collection('Favorite Movies').doc().collection(uid.toString()).doc().set( movies.toJson()); print('data adedd succesfullyyyyyy'); } catch (e, s) { print("@DatabaseService Exception IN ADDNG FAVOTRITE DATA $e"); print(s); } }

This function store the favorite movie of a specific user in his/her collection

2. Retrive and the Favorite movie json data of a user from the Firestore database using a function in same manner as will do in storing the favorite data, and display the data in the Favorite Screen