Flutter clone of my "Cinematic" App

Overview

Flutter Cinematic

This app is a Flutter port of the native Android App Cinematic. My intention in creating this app was understanding the intricacies of building apps in Flutter. Just like the native Android App this app does not make any efforts in being a nicely architectured application. That being said the whole point is to showcase Flutter's capabilities for building simple apps and to understand key difference and advantages to native development.

Overview

The app uses the Movie DB Public API as a data sources and uses the standard dart libraries for making network requests.

In terms of UI, the goal was replicating the Android design as closely as possible to understand the possibilities that Flutter offers for crafting UIs.

Building from Source

To build this app from source you will have to obtain an API-key from TMDB right here. Set this key to the constant API_KEY in constants.dart to run the app. Additionally, the app now uses Dart2 which means that you should enable that in your IDE if you haven't done so yet.

Video

In App Experience

Learnings

Creating this app and learning Flutter in general felt like a gift for developers. It significantly increased development velocity by, amongst others, reducing development cycles and the ability to create reactive, modular components. Coming from the realms of Android, those are the things that stood out to me:

  • Creating beautiful UIs is easier with Flutter
  • Avoiding to write boilerplate code (XML layouts, adapters etc.)
  • Creating UIs in a declarative way without dealing with the shortcomings of Android's Databinding
  • Hot Reload - this one is a game-changer
  • Dart is not that bad of a language, but it doesn't get close to Kotlin. I think for the Usecase of Flutter Dart actually makes a lot of sense
  • The ability to not worry about state changes in the UI. The Widget will take care of the rendering using it's properties or state

License

This project utilizes the MIT License

Comments
  • Failed to build release for Android devices. No issue on iOS devices.

    Failed to build release for Android devices. No issue on iOS devices.

    RMBP➜ FlutterCinematic git:(master) ✗ >flutter run -d all --release Running "flutter packages get" in FlutterCinematic... 0.5s Initializing gradle... 0.9s Resolving dependencies... 1.8s Launching lib/main.dart on MI 6 in release mode... Running 'gradlew assembleRelease'... VMIsolate(CodeSize): 4613 Isolate(CodeSize): 1699574 ReadOnlyData(CodeSize): 2484048 Instructions(CodeSize): 5880224 Total(CodeSize): 10068459 Gradle build failed to produce an Android package.

    opened by zinwalin 2
  • sorry there was an error loading media data

    sorry there was an error loading media data

    after apply the changes suggested by pull request #24 opened on 10 May by @kkpenaranda the app runs on android studio 3.4.2. but in media_list.dart

     Widget _getContentSection() {
        print("_getContentSection");
        print(_loadingState);
        switch (_loadingState) {
          case LoadingState.DONE:
            return ListView.builder(
                itemCount: _movies.length,
                itemBuilder: (BuildContext context, int index) {
                  if (!_isLoading && index > (_movies.length * 0.7)) {
                    _loadNextPage();
                  }
    
                  return MediaListItem(_movies[index]);
                });
          case LoadingState.ERROR:
            return const Text('Sorry, there was an error loading the data!');
          case LoadingState.LOADING:
            return const CircularProgressIndicator();
          default:
            return Container();
        }
      }
    

    on widget _getContentSection first print LoadingState.LOADING then print LoadingState.ERROR and get the text 'Sorry, there was an error loading the data!' the api_key is working return results like:

    {
        "page": 1,
        "total_results": 10000,
        "total_pages": 500,
        "results": [
            {
                "popularity": 481.769,
                "vote_count": 364,
                "video": false,
                "poster_path": "/zfE0R94v1E8cuKAerbskfD3VfUt.jpg",
                "id": 474350,
                "adult": false,
                "backdrop_path": "/p15fLYp0X04mS8cbHVj7mZ6PBBE.jpg",
                "original_language": "en",
                "original_title": "It Chapter Two",
                "genre_ids": [
                    35,
                    27
                ],
                "title": "It Chapter Two",
                "vote_average": 7.2,
                "overview": "27 years after overcoming the malevolent supernatural entity Pennywise, the former members of the Losers' Club, who have grown up and moved away from Derry, are brought back together by a devastating phone call.",
                "release_date": "2019-09-06"
            },
    

    but i can't find why this doesn't show the list in the main screen. some one can help to solve this? thanks

    opened by alexlovar 1
  •  list not show in all tabs

    list not show in all tabs

    Hi, I had checked out the newest code. My dart version is dart 2. But It still show the bellow message in the app

    "Sorry, there was an error loading the data!" Thanks

    opened by hasonguo 0
  • Reported bugs fixed and changed dependencies so that we could compile

    Reported bugs fixed and changed dependencies so that we could compile

    We change the versions to the libraries to be able to run the application (rxdart, scoped_model). In addition, we solved issue #31 of memory leak, for this the HistoryLimit class was added, which is responsible for verifying the limit to the number of layers within the Navigator stack, the navigator class was also changed, with a new method to add media detail that removes views from the stack if they are very old. We also solved issue #32 , in this when the size of the favorites is very large, the application closes. For this, a new class was added within utils called app_model_db, it stores the favorites in a local database with sqlite, it has the same methods as the previous class and it works with Model, for this the imports to app_model were also modified. We also resolved isuue #33 an overflow in the media detail view, it was modified by changing the widget to a Wrap which makes it easier if the categories exceed the screen size, a new row is generated. We also solved isuue #34 , a method was added within utils to check the status of the internet connection and actor detail was modified to send a message when there is no connection.

    opened by Lala341 0
  • Connectivity scenarios

    Connectivity scenarios

    Hello, We found that the application does not handle connectivity scenarios, this would improve the user experience. There is a message in the view is there was an error in the data load, this message is sent if it is not possible to obtain the response of the data request. This message is only shown for the views that have lists of movies or tv shows, but for the others it does not exist. This happens when the user browses the application and loses the connection. For example, in the case of the detail of an actor, this verification does not exist, so it does not throw error messages, and since there is no data, the progress indicator remains fixed.

    opened by Lala341 0
  • Overflow in media detail

    Overflow in media detail

    Hello, We found a problem. It arises in the detail view of the movie or tv show when the size of the elements of the categories of these exceed the limit of the screen. This problem originates because the widget that has the Labels is a Row, it has a fixed size, therefore, when the size of the categories is greater, it generates the error. To solve this error, it is necessary to change the Row for a widget of the ListView type, which allows scrolling when the size is larger.

    cee31446-dc5b-427d-b708-06ebf71bb643

    opened by Lala341 0
  • Failed to reach maximum capacity of shared preferences for favorites.

    Failed to reach maximum capacity of shared preferences for favorites.

    Hello, We found a local data storage problem, when 100 movies stored in favorites in shared preferences are exceeded, it generates a memory error. This forces the application to stop, the solution lies in implementing another storage method for this type of local data on the device.

    opened by Lala341 0
  • Memory leak

    Memory leak

    Hello, We found a memory problem. There is no control to overlay views as we can infinitely delve into actors, movies and TV show, the stack can grow indefinitely and this causes the memory usage of the application to grow indefinitely as well, until the application reset or an OOM error occurs. This is an image of the performance on an android device, when the memory reaches 600MB, the application closes. Captura de Pantalla 2020-05-15 a la(s) 6 39 39 a  m

    opened by Lala341 0
Owner
Aaron Oertel
Android @ Microsoft
Aaron Oertel
Fintech dashboard clone - Fintech Dashboard Clone Built With Flutter

Fintech Dashboard Clone This repository is based on converting the mockup below

null 77 Jan 7, 2023
A clone of the Cowrywise app UI in Flutter

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

Chiziaruhoma Ogbonda 11 Sep 28, 2022
Amazon ui l8 - The Amazon shop app clone with flutter

amazon_ui Amazon shop appning eski versiyasi kloni ` Darsda berilgan shartga ko'

Muminjon 0 Jan 26, 2022
This is a clone of the Google News mobile app.

gnewsclone This is a clone of the Google News mobile app. I will try to develop it as close as possible. I am new to Flutter, and I might end refactor

Degreat 10 Sep 18, 2022
A fully functional Instagram clone written in Flutter using Firebase / Firestore

Fluttergram A working Instagram clone written in Flutter using Firebase / Firestore Demo Download the release APK to try out Fluttergram I update Flut

Matthew Danics 2.1k Jan 8, 2023
Fully functional Twitter clone built in flutter framework using Firebase realtime database and storage

Fwitter - Twitter clone in flutter A working Twitter clone written in Flutter using Firebase auth,realtime,firestore database and storage. Download Ap

Sonu Sharma 2.4k Jan 8, 2023
Clone do aplicativo mobile da Nubank utilizando Flutter

Nubank Clone Introdução Screenshots Executando Contribua Introdução Este projeto se trata de uma recriação bem próxima da interface do app do Nubank u

Ricardo Dalarme 47 Dec 14, 2022
A clone of Netflix using flutter

A clone of Netflix using flutter

Sreehari vr 2 Nov 14, 2021
Google Keep Clone using flutter

flutter_google_keep_clone A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get yo

vedant prasad priya karle 2 Apr 29, 2022
A Simple Twitter Clone Using Flutter

flutter_twitter_clone A new Flutter project. How to run? Setup Clone the repo git clone https://github.com/skripsimu/tegar-nugroho-mobile-16Nov2021.gi

Tegar Nugroho 0 Nov 16, 2021
A sample application to show Paytm Flutter Clone.

Flutter Paytm UI Demo A sample application to show Paytm Flutter Clone. Demo Android Screen iOS Screen Getting Started This project is a starting poin

FlutterDevs 178 Sep 27, 2022
A Netflix clone built with @appwrite + @flutter

Almost Netflix - Flutter Requirements Before using this project, you will need to have Appwrite instance with Almost Netflix project ready. You can vi

Appwrite 49 Dec 26, 2022
Full Stack Instagram Clone made with ❤ using Flutter & Firebase.

Instagram Clone Full Stack Instagram Clone made with ❤ using Flutter & Firebase. Click on the link below to view the Overview video by Tushar Khatri.

Tushar Khatri 7 Oct 22, 2022
A sample application to show Google Drive Flutter Clone.

Flutter Google Drive UI Demo A sample application to show Google Drive Flutter Clone. Demo Android Screen iOS Screen Getting Started This project is a

FlutterDevs 9 May 6, 2021
Instagram Clone with Flutter 3 and Firebase

Multiplatform App with Flutter 3 and Firebase. Support for android, iOS, Macos and Web. ?? Working on making the view more Responsive, and support for Windows and Linux

Debanshu Datta 16 Oct 13, 2022
WhatsApp UI Clone

WhatsAppUIClone It is a copy of the WhatsApp design. What's inside Chat list Chat detail screen Statuses page Story view search page Images related to

Umut Ocak 20 Jun 27, 2022
Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to connect with friends,family & colleagues. Developed as a redesign of Microsoft Teams during my menteeship at Microsoft Engage 2021

Microsoft Teams Clone by Karanjot Singh About Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to conne

Karanjot Singh 60 Dec 28, 2022
Telegram clone ❤️

telegram_clone Hello there, I tried to write clone of telegram in this application. I will prepare the whole design of telegram and present it to the

Ömer Faruk Biçer 8 Oct 31, 2022
This is a clone of the WhatsApp UI...

whatsapp_ui_clone A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

MUGI 1 Oct 25, 2021