Using the flutter provider, creating a dynamic movie list application.

SHAILAJA GAJERA SHAILAJA GAJERA
6 min read

Using Flutter and the Provider package, we'll look at how to make a dynamic movie list app in this easy-to-follow Flutter is a popular open-source UI framework for creating natively built desktop, web, and mobile applications from a single codebase. In Flutter, the Provider state management solution makes it easier to maintain and share application state. You'll have a fully functional movie list app with dynamic movie data fetching and display at the conclusion of this lesson.

Step 1: Set Up a New Flutter Project.

Step 2: Add Dependencies.


dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.3

Run flutter pub get to fetch and install the dependencies.

Step 3: Create the Movie Model

class Movie {
  final String title;
  final String? duration;

  Movie({required this.title, this.duration});
}

Step 4: Create the Movie Provider.

Next, create a folder named providers. Inside this folder, create a file named movie_provider.dart to define the MovieProvider class:


import 'package:flutter/cupertino.dart';
import '../Model/movie_model.dart';


class MovieProvider with ChangeNotifier{

  final List<Movie> _movies = [
    Movie(title: "Avatar", duration: "162 minutes"),
    Movie(title: "Inception", duration: "148 minutes"),
    Movie(title: "Gadder 2", duration: "142 minutes"),
    Movie(title: "OMG 2", duration: "165 minutes"),
    Movie(title: "GolMal", duration: "184 minutes"),
    Movie(title: "Ready", duration: "166 minutes"),
    Movie(title: "Paa", duration: "148 minutes"),
    Movie(title: "BodyGuard", duration: "150 minutes"),
    Movie(title: "Hamshakal", duration: "170 minutes"),
    Movie(title: "Houseful", duration: "184 minutes"),
    Movie(title: "Interstellar", duration: "181 minutes"),
    Movie(title: "The Dark Knight", duration: "177 minutes"),
    Movie(title: "मुझसे दोस्ती करोगे", duration: "179 minutes"),
    Movie(title: "दिलवाले दुल्हनिया ले जायेंगे", duration: "169 minutes"),
    Movie(title: "कभी ख़ुशी कभी ग़म", duration: "168 minutes"),
    Movie(title: "बाहुबली: द बेगिनिंग", duration: "182 minutes"),
    Movie(title: "यह जवानी है दीवानी", duration: "182 minutes"),
    Movie(title: "रॉकस्टार", duration: "182 minutes"),
    Movie(title: "જોન જનમ જનાર્ડન", duration: "182 minutes"),
    Movie(title: "પોલામ પોલ", duration: "182 minutes"),
    Movie(title: "બેબીની ચમક પડે નહીં", duration: "182 minutes"),
    Movie(title: "ಹೆಗ್ಗಡೆ ಮಲ್ಲೆ", duration: "182 minutes"),
    Movie(title: "బాహుబలి", duration: "182 minutes"),
    Movie(title: "പ്രേമം", duration: "182 minutes"),
    Movie(title: "പ്രാഞ്ചൻ", duration: "182 minutes"),
  ];
  List<Movie> get movies => _movies;


  final List<Movie> _myList = [];
  List<Movie> get myList => _myList;


  void addToList(Movie movie){
    _myList.add(movie);
    notifyListeners();
  }


  void removeFromList(Movie movie){
    _myList.remove(movie);
    notifyListeners();
  }
}

Step 5: Implement the Main Application

main.dart file, set up the main application entry point:

import 'package:flutter/material.dart';
import 'package:flutter_provider/Providers/movie_provider.dart';
import 'package:flutter_provider/home_screen.dart';
import 'package:provider/provider.dart';



void main() {
  runApp(
    ChangeNotifierProvider<MovieProvider>(
      child: const MyApp(),
      create: (_) => MovieProvider(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Movie App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        cardColor: Colors.purple[100],
      ),
      home: const Scaffold(
        body: HomeScreen(), // Replace with your actual widget tree
      ),
    );
  }
}

Step: 6

I'll explore how to enhance a Flutter movie app by adding a "Favorites" feature using the Provider package. This feature allows users to mark their favorite movies and showcases the power of Provider for managing state in Flutter.

import 'package:flutter/material.dart';
import 'package:flutter_provider/Providers/movie_provider.dart';
import 'package:provider/provider.dart';
import 'fav_movie.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    var movies = context.watch<MovieProvider>().movies;
    var myList = context.watch<MovieProvider>().myList;

    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight + 100),
        // Adjust the height as needed
        child: Stack(
          children: [
            Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      'https://static.wixstatic.com/media/1d6090cc4bbf44628dfd82a1979770e8.jpg/v1/fill/w_980,h_490,fp_0.50_0.50,q_90,usm_0.66_1.00_0.01/1d6090cc4bbf44628dfd82a1979770e8.jpg'),
                  // Replace with your app bar background image asset
                  fit: BoxFit.cover,
                ),
              ),
            ),
            AppBar(
              title: const Text("Provider"),
              backgroundColor: Colors.transparent,
              // Make the AppBar background transparent
              elevation: 0,
            ),
          ],
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            ElevatedButton.icon(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => const MyListScreen()));
              },
              icon: const Icon(Icons.favorite),
              label: Text(
                " Go to my List(${myList.length})",
                style: const TextStyle(fontSize: 25),
              ),
              style: ElevatedButton.styleFrom(
                primary: Colors.black,
                padding: const EdgeInsets.symmetric(vertical: 20),
              ),
            ),
            const SizedBox(height: 15),
            Expanded(
              child: ListView.builder(
                itemCount: movies.length,
                itemBuilder: (_, index) {
                  final currentMovie = movies[index];
                  return Card(
                    key: ValueKey(currentMovie.title),
                    color: Colors.red[900],
                    elevation: 4,
                    child: ListTile(
                      title: Text(
                        currentMovie.title,
                        style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontSize: 21),
                      ),
                      subtitle: Text(
                        currentMovie.duration ?? 'No Information',
                        style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                            fontSize: 17),
                      ),
                      trailing: IconButton(
                        icon: Icon(
                          Icons.favorite,
                          color: myList.contains(currentMovie)
                              ? Colors.black
                              : Colors.white,
                          size: 30,
                        ),
                        onPressed: () {
                          if (!myList.contains(currentMovie)) {
                            context
                                .read<MovieProvider>()
                                .addToList(currentMovie);
                          } else {
                            context
                                .read<MovieProvider>()
                                .removeFromList(currentMovie);
                          }
                        },
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Adding the Favorites Feature:

  1. Understanding the App Structure: The Flutter movie app consists of a home screen displaying a list of movies. Each movie card contains a title, duration, and a heart-shaped icon indicating whether it's a favorite.

  2. Defining Movie Lists: We have two lists: movies and myList. movies contains all available movies, while myList stores the user's favorite movies.

  3. Displaying Favorites: We display the list of movies in a ListView.builder, with a heart icon that changes color based on whether the movie is in the user's favorites list.

  4. Toggling Favorites: When the heart icon is pressed, we use context.read<MovieProvider>() to access the MovieProvider and call addToList or removeFromList to update the favorites list.

  5. Navigating to Favorites: We've added a button that allows users to navigate to a screen called MyListScreen, where they can see their favorite movies.

Step: 7

I'll explore how to create a "Favorites" list in a Flutter app using the Provider package. This feature allows users to mark and manage their favorite items, a common and useful functionality in many mobile applications.

import 'package:flutter/material.dart';
import 'package:flutter_provider/Providers/movie_provider.dart';
import 'package:provider/provider.dart';

class MyListScreen extends StatefulWidget {
  const MyListScreen({Key? key}) : super(key: key);

  @override
  MyListScreenState createState() => MyListScreenState();
}

class MyListScreenState extends State<MyListScreen> {
  @override
  Widget build(BuildContext context) {
    final _myList = context.watch<MovieProvider>().myList;

    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight + 100),
        // Adjust the height as needed
        child: Stack(
          children: [
            Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      'https://static.wixstatic.com/media/1d6090cc4bbf44628dfd82a1979770e8.jpg/v1/fill/w_980,h_490,fp_0.50_0.50,q_90,usm_0.66_1.00_0.01/1d6090cc4bbf44628dfd82a1979770e8.jpg'),
                  // Replace with your app bar background image asset
                  fit: BoxFit.cover,
                ),
              ),
            ),
            AppBar(
              title: Text("My List (${_myList.length})"),
              backgroundColor: Colors.transparent,
              // Make the AppBar background transparent
              elevation: 0,
            ),
          ],
        ),
      ),
      body: ListView.builder(
        itemCount: _myList.length,
        itemBuilder: (_, index) {
          final currentMovie = _myList[index];
          return Card(
            key: ValueKey(currentMovie.title),
            color: Colors.red[900],
            elevation: 4,
            child: ListTile(
              title: Text(
                currentMovie.title,
                style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 21),
              ),
              subtitle: Text(
                currentMovie.duration ?? 'No Information',
                style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                    fontSize: 17),
              ),
              trailing: IconButton(
                icon: const Icon(Icons.delete_forever,color: Colors.black,),
                onPressed: () {
                  context.read<MovieProvider>().removeFromList(currentMovie);
                },
              ),
            ),
          );
        },
      ),
    );
  }
}

Building the Favorites List:

  1. Understanding the App Structure: Our Flutter app consists of a movie list screen and a favorites list screen. Users can add movies to their favorites list from the movie list screen.

  2. Displaying the Favorites List: In the MyListScreen, we use context.watch<MovieProvider>() to access the MovieProvider and retrieve the user's favorites list, _myList.

  3. Visualizing Favorites: We display the favorite movies in a ListView.builder, showing each movie's title, duration, and a delete icon.

  4. Removing from Favorites: When the delete icon is tapped, we use context.read<MovieProvider>() to remove the movie from the favorites list using the removeFromList method.

1
Subscribe to my newsletter

Read articles from SHAILAJA GAJERA directly inside your inbox. Subscribe to the newsletter, and don't miss out.

FlutterProviderlistListsflutter provider

Written by

SHAILAJA GAJERA
SHAILAJA GAJERA