Netflix Clone with BloC, GoRouter and TMDB.

Overview

πŸš€ Netflix UI Clone in Flutter using BloC

Backdrop

The Project uses BloC package to manage the state and GoRouter for navigation. It use the awesome TMDB API to fetch the needed tv shows and movie data.

The main purpose of this project is to demonstrate the usage of BloC and GoRouter combined but even more to demonstrate Slivers usage in Flutter. It heavily depends on Slivers, like CustomScrollView, SliverList, GridView, SliverAppBar and even SliverPersistentHeader. It also has a BottomBarNavigation nicely implemented with GoRouter's ShellRoute. Apart from that it uses Hero Widgets in order to animate a simple small transition when moving from Home -> Tv Shows and a CustomPainter to replicate the smiley faces on the profiles.

It contains various screens like Profile Selection, Home, New & Hot, Movie and Tv Show Details Page.

Apart from that the project implements custom App Icon and Splash Screen and on Android it uses the new Android 12 API for showing Splash screen.

NOTE: This project is not a complete Netflix UI Clone but I would say it's the most "complete" compared to other on the internet which in their way are awesome as well!

Download

For those that want to have a quick look at the app you can download and install the apk on an android device or emulator from Releases.

Running

  1. Get Packages
flutter pub get
  1. Get an API key from TMDB and replace it in lib/api/api.dart
final apiKey = 'INSERT_YOUR_API_KEY_HERE';
  1. Run App
flutter run --release

Links

Netflix Clone in Flutter using BloC, GoRouter and TMDB - Medium

TMDB Site

TMDB API

Credits

The Movie DB Flutter Netflix

Licence

flutter_netflix is Licenced under the MIT Licence

You might also like...

Example de layout in Flutter inspiration in Netflix App + Woody Woodpecker Characters

PicFlix Example de layout in Flutter inspiration in Netflix App + Woody Woodpecker Characters Cover extracted of https://twitter.com/winemcbride/statu

May 17, 2021

An extension to the bloc state management library which automatically persists and restores bloc states.

An extension to the bloc state management library which automatically persists and restores bloc states.

⚠️ Attention: This repository has been moved to https://github.com/felangel/bloc and is now read-only! An extension to the bloc state management libra

Nov 17, 2022

Notes-bloc-flutter - Proyecto para administrar tareas implementando patrΓ³n bloc

notes_bloc A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Jan 9, 2022

Flutter bloc cubit test knowdge - Flutter bloc cubit test knowdge

Flutter Bloc Simple Api This project is using weather api for featch data and di

Jan 3, 2022

Flutter bloc infinite list - A sample application to learn flutter bloc the correct way

flutter_bloc_infinite_list A sample application to learn flutter bloc the correc

Aug 22, 2022

Flutter bloc example - An app for State management using BLoC pattern in Flutter

Flutter bloc example - An app for State management using BLoC pattern in Flutter

Flutter BLoC My first app for State management using BLoC pattern in Flutter Col

Jun 16, 2022

An example of "reactive/streaming repository" as a solution for BLoC to BLoC communication

An example of

Reactive Repositories An example of listening to a Stream from repository layer (instead of explicitly using get/fetch) as a solution for BLoC to BLoC

Jan 3, 2023

Instagram-clone - Instagram clone built using flutter and Firebase

Instagram-clone - Instagram clone built using flutter and Firebase

Instagram-clone statistics of Firebase usage User Authentication for Instagram l

Jul 18, 2022

Wordle clone flutter - Wordle clone built with flutter

Wordle Generated by the Very Good CLI πŸ€– A Very Good Project created by Very Goo

Jun 7, 2022
Owner
Angjelko Miloshevski
Angjelko Miloshevski
Netflix clone flutter - A clone of netflix UI Built with flutter

Netflix Clone Ui Projeto onde foi criado um clone da interface da Netflix para m

null 4 Aug 18, 2022
Netflix redesign - Redesign a Netflix movie streaming app UI With Flutter

Redesign Netflix App Packages http jiffy cached_network_image flutter_svg carous

tustoz 20 Oct 10, 2022
Netflix redesign - Netflix UI Redesign With Flutter

netflix_redesign Getting Started For help getting started with Flutter, view our

Beyza Mersinli 2 Feb 18, 2022
An example on how to use Riverpod + GoRouter

go_router_example A simple login / logout example that showcases the use of Riverpod with GoRouter. This example exploits the usage of ref.listen and

Luca Venir 149 Jan 1, 2023
Netflix type clone app to learn animation and basic UI components..

netflix_clone A new Flutter application to learn animation and basic ui components.. Assets credit to dribbble artist Getting Started This project is

Divyam joshi 169 Dec 9, 2022
Netflix Clone Project

Netflix Clone Project A new Flutter project. Day 01 Completed Day 02 Completed Getting Started This project is a starting point for a Flutter applicat

Muhammad Rameez 4 Dec 1, 2022
Code practice with TMDB API.

Movies Code practice with TMDB API. If you want to run this code, please use your own API_KEY here Getting Started This project is a starting point fo

Brandon Rojas 2 Jan 10, 2022
Flutter application for tMDB data fetch

Flutter Test Flutter application for tMDB data fetch. Getting Started To run the project: Get TMDB key from here Open the project in your IDE. Create

null 1 Apr 14, 2022
Flutter-Movie - A Flutter movie app build with Fish-Redux na TMDB api

the applikation A Flutter movie app build with Fish-Redux na TMDB api. ToDos redesign UI account detail customize stream support dark mode support loc

Dominique Rwema Bagirishya 27 Jul 21, 2022