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:
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.
Defining Movie Lists: We have two lists:
moviesandmyList.moviescontains all available movies, whilemyListstores the user's favorite movies.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.Toggling Favorites: When the heart icon is pressed, we use
context.read<MovieProvider>()to access theMovieProviderand calladdToListorremoveFromListto update the favorites list.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:
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.
Displaying the Favorites List: In the
MyListScreen, we usecontext.watch<MovieProvider>()to access theMovieProviderand retrieve the user's favorites list,_myList.Visualizing Favorites: We display the favorite movies in a
ListView.builder, showing each movie's title, duration, and a delete icon.Removing from Favorites: When the delete icon is tapped, we use
context.read<MovieProvider>()to remove the movie from the favorites list using theremoveFromListmethod.