Are you ready to dive into the world of Flutter and build a movies app using cutting-edge technologies? In this article, we’ll walk you through the process of developing a Flutter Movies App leveraging the renowned TMDB API and state management powered by Riverpod. Let’s illuminate the path to your coding adventure!

Motivation Behind the App

This app is designed to showcase the latest API functionalities of popular packages like Riverpod and GoRouter. While it’s not a complete movies app, it effectively demonstrates common use cases and features essential for any modern app.

Current Features

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

Planned Features (No Promises!)

• Favorites functionality
• Responsive UI design

Packages in Use

• flutter_riverpod and riverpod_generator for data caching
• freezed for JSON serialization
• dio for networking
• go_router for navigation
• shimmer for the loading UI
• envied for API key management
• cached_network_image for image caching

Understanding the App Architecture

The project follows a feature-first project structure based on Riverpod. This organization helps manage complexity as the app grows. For further information, explore the following:

• Flutter App Architecture with Riverpod: An Introduction
• Flutter Project Structure: Feature-first or Layer-first?
• Riverpod Generator
• Auto-Generate your Providers with Flutter Riverpod Generator

Getting a TMDB API Key and Running the Project

To fetch the latest movies data, the app utilizes the TMDB API. Follow these steps:

1. Sign up on the TMDB website.
2. Access your API key on the settings API page.
3. Create an .env file at the project root and add your API key:

TMDB_KEY=your-api-key

4. Run the code generator:

dart run build_runner build -d

5. Once this is done, you’re set to go!

Configuration for Insecure HTTP Endpoints

Since the TMDB API uses unsecured HTTP endpoints for images, necessary configurations must be made for both Android and iOS platforms:

For Android

• Create a file at android/app/src/main/res/xml/network_security_config.xml with the following contents:

?xml version="1.0" encoding="utf-8"?
    
        
    

• Add the above XML configuration in the AndroidManifest.xml file:

android:networkSecurityConfig="@xml/network_security_config"

For iOS

• Update Info.plist with the following:

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

For macOS

• Add the required entitlements in macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements:

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

For the latest information, check out Insecure HTTP connections.

Troubleshooting Ideas

Should you encounter any issues while setting up or running the app, consider the following:

• Verify that your API key is correctly entered in the .env file.
• Ensure that you follow the configurations for insecure HTTP endpoints properly.
• Review any error messages in the console for specific hints on what might be going wrong.
• Check for updates or issues on the respective package repositories.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.