Pub get not working

Flutter Movies app with Riverpod (TMDB API)

This is an improved version of my old movies app based on the latest Riverpod 2.0 APIs.

Motivation

I built this app to showcase the latest APIs for popular packages such as Riverpod and GoRouter.

This is not meant to be a complete movies app, yet it should implement common use cases and features. 👇

Current Features

Infinite scrolling with pagination
Pull to refresh
Search functionality
Loading UI with the Shimmer package
Stateful nested routing with StatefulShellRoute

Here's a detailed tutorial explaining how the pagination and search UI works:

Flutter Pagination with Riverpod: The Ultimate Guide

Planned Features (no promises 😅)

Favourites
Responsive UI

Packages in use

flutter_riverpod and riverpod_generator for data caching (and much more!)
freezed for JSON serialization
dio for networking
go_router for navigation
shimmer for the loading UI
envied for handling API keys
cached_network_image for caching images

App Architecture & Folder structure

The project follows my Riverpod app architecture with a feature-first project structure.

More details here:

It also uses the new Riverpod Generator package, which I have covered here:

How to Auto-Generate your Providers with Flutter Riverpod Generator

Getting a TMDB API Key and Running the Project

This project uses the TMDB API to get the latest movies data.

Before running the app, you need to sign up on the TMDB website, then obtain an API key on the settings API page.

Once you have this, create an .env file at the root of the project and add your key:

// .env
TMDB_KEY=your-api-key

Then, run the code generator:

dart run build_runner build -d

This will generate a env.g.dart file inside lib/env. This contains the tmdbApiKey that is used when making requests to the TMDB API.

Congratulations, you're good to go. 😎

Note: Loading images from insecure HTTP endpoints

The data returned by the TMBD API points to image URLs using http rather than https. For the images to load correctly, the following changes have been made:

Android

Created a file at android/app/src/main/res/xml/network_security_config.xml with these contents:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

Added this to the application tag in the AndroidManifest.xml:

android:networkSecurityConfig="@xml/network_security_config"

iOS

Add the following to ios/Runner/info.pList:

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>

More information here:

Insecure HTTP connections are disabled by default on iOS and Android.

macOS

Since macOS applications are sandboxed by default, we get a SocketException if we haven't added the required entitlements. This has been fixes by adding these lines to macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements:

<key>com.apple.security.network.client</key>
<true/>

More info here:

How to fix "SocketException: Connection failed (Operation not permitted)" with Flutter on macOS

	@riverpod
	Future<List<TMDBMovie>> fetchMovies(
	FetchMoviesRef ref, {
	required MoviesPagination pagination,
	}) async {
	final moviesRepo = ref.watch(moviesRepositoryProvider);
	// See this for how the timeout is implemented:
	// https://codewithandrea.com/articles/flutter-riverpod-data-caching-providers-lifecycle/#caching-with-timeout
	// Cancel the page request if the UI no longer needs it.
	// This happens if the user scrolls very fast or if we type a different search
	// term.
	final cancelToken = CancelToken();
	// When a page is no-longer used, keep it in the cache.
	final link = ref.keepAlive();
	// a timer to be used by the callbacks below
	Timer? timer;
	// When the provider is destroyed, cancel the http request and the timer
	ref.onDispose(() {
	cancelToken.cancel();
	timer?.cancel();
	});
	// When the last listener is removed, start a timer to dispose the cached data
	ref.onCancel(() {
	// start a 30 second timer
	timer = Timer(const Duration(seconds: 30), () {
	// dispose on timeout
	link.close();
	});
	});
	// If the provider is listened again after it was paused, cancel the timer
	ref.onResume(() {
	timer?.cancel();
	});
	if (pagination.query.isEmpty) {
	// use non-search endpoint
	return moviesRepo.nowPlayingMovies(
	page: pagination.page,
	cancelToken: cancelToken,
	);
	} else {
	// Debounce the request. By having this delay, consumers can subscribe to
	// different parameters. In which case, this request will be aborted.
	await Future.delayed(const Duration(milliseconds: 500));
	if (cancelToken.isCancelled) throw AbortedException();
	// use search endpoint
	return moviesRepo.searchMovies(
	page: pagination.page,
	query: pagination.query,
	cancelToken: cancelToken,
	);
	}
	}

	error: (err, stack) => Text('Error $err'),
	loading: () => const MovieListTileShimmer(),
	data: (movies) {

bizz84 / tmdb_movie_app_riverpod Goto Github PK

tmdb_movie_app_riverpod's Introduction

Flutter Movies app with Riverpod (TMDB API)

Motivation

Current Features

Planned Features (no promises 😅)

Packages in use

App Architecture & Folder structure

Getting a TMDB API Key and Running the Project

Note: Loading images from insecure HTTP endpoints

Android

iOS

macOS

tmdb_movie_app_riverpod's People

Contributors

Stargazers

Watchers

Forkers

tmdb_movie_app_riverpod's Issues

Recommend Projects

Recommend Topics

Recommend Org