DEV Community

Cover image for Movie X: A Developer’s Dive Into Flutter Project Organization
ℵi✗✗
ℵi✗✗

Posted on

1 1 1 1 1

Movie X: A Developer’s Dive Into Flutter Project Organization

As developers, we know that the success of any project often hinges on how well its foundation is structured. Enter Movie X, a mobile app that not only lets users explore the world of movies but also serves as a great example of clean, scalable project organization in Flutter.

In this article, we’ll break down the Movie X codebase, showcasing its structure, some key components, and how you can use it as a reference for your own projects. Let’s get started!


Project Overview

The Movie X app demonstrates how to organize a Flutter project for scalability and maintainability. Its directory structure follows best practices, ensuring every piece of functionality has a designated place, making it easier to navigate, update, and debug.

Here’s a look at the complete project tree:

┣ 📂assets
┃ ┣ 📂icons
┃ ┣ 📂images
┃ ┃ ┣ 📜placeholder.png
┃ ┃ ┣ 📜tmdb_blue_square.png
┃ ┃ ┗ 📜tmdb_blue_square.svg
┣ 📂components
┃ ┣ 📜app_bottom_nav.dart
┃ ┣ 📜app_header.dart
┃ ┣ 📜movie_card.dart
┃ ┣ 📜movie_poster.dart
┃ ┣ 📜star_rating.dart
┃ ┗ 📜tv_card.dart
┣ 📂constants
┃ ┣ 📜constants.dart
┃ ┗ 📜strings.dart
┣ 📂models
┃ ┣ 📜genre.dart
┃ ┗ 📜movie.dart
┣ 📂screens
┃ ┣ 📜about_screen.dart
┃ ┣ 📜detail_screen.dart
┃ ┣ 📜home_screen.dart
┃ ┣ 📜latest_screen.dart
┃ ┣ 📜search_screen.dart
┃ ┗ 📜settings_screen.dart
┣ 📂services
┃ ┣ 📜api_service.dart
┃ ┗ 📜movie_service.dart
┣ 📂styles
┃ ┗ 📜text_styles.dart
┣ 📂theme
┃ ┗ 📜app_theme.dart
┣ 📂utils
┃ ┗ 📜string_utils.dart
┗ 📜main.dart
Enter fullscreen mode Exit fullscreen mode

Breaking It Down

Assets

The assets directory houses all the static resources, such as images and icons, used throughout the app. Keeping them here makes it easy to update or reuse them when needed.

Image.asset('lib/assets/images/tmdb_blue_square.png');
Enter fullscreen mode Exit fullscreen mode

Components

The components folder contains reusable widgets like movie_card.dart and star_rating.dart. These building blocks ensure modularity, so you can use them across multiple screens.

class StarRating extends StatelessWidget {
  final double rating;
  const StarRating({required this.rating});

  @override
  Widget build(BuildContext context) {
    // Star rating implementation
  }
}
Enter fullscreen mode Exit fullscreen mode

Constants

The constants directory holds app-wide constants and string literals, reducing redundancy and preventing hardcoding.

class AppStrings {
  static const String home = 'Home';
  static const String search = 'Search';
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Models

The models folder defines the data structures for the app. For instance, the Movie model encapsulates details like the movie's ID, title, and poster path.

class Movie {
  final int id;
  final String title;
  final String posterPath;

  Movie({required this.id, required this.title, required this.posterPath});
}
Enter fullscreen mode Exit fullscreen mode

Screens

Each screen or page in the app has its own file inside the screens folder, making navigation straightforward. For example, home_screen.dart represents the home page.

class _HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screenOptions[selectedIndex],
      bottomNavigationBar: AppBottomNav(
        selectedIndex: selectedIndex,
        onTabChange: (index) => handleTabChange(index),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Services

The services directory separates API logic from UI code. api_service.dart handles HTTP requests, while movie_service.dart simplifies interactions with the movie API.

class MovieService {
 Future<List<Movie>> getLatestMovies() async {
  final List<Movie> movies = [];

  final jsonBody = await _api.get('/trending/movie/day');
  final List results = jsonBody['results'];

  for (var tv in results) {
     movies.add(Movie.fromJson(tv));
  }

  return movies;
 }
}
Enter fullscreen mode Exit fullscreen mode

Styles

Centralized styles ensure the app’s design stays consistent. The text_styles.dart file defines text formats used across the app.

class AppTextStyle {
   static final TextStyle titleLarge = GoogleFonts.poppins(
    fontSize: 30,
    fontWeight: FontWeight.bold,
    color: Colors.grey[100],
  );
}
Enter fullscreen mode Exit fullscreen mode

Theme

The theme folder defines the application's single theme, ensuring consistent styling across the app.

ThemeData defaultAppTheme = ThemeData(
  brightness: Brightness.dark,
  textTheme: TextTheme(
    titleLarge: AppTextStyle.titleLarge,
    titleMedium: AppTextStyle.titleMedium,
    titleSmall: AppTextStyle.titleSmall,
    bodyMedium: AppTextStyle.bodyMedium,
    bodySmall: AppTextStyle.bodySmall,
  ),
  colorScheme: ColorScheme.dark(
    surface: Colors.grey.shade900,
    primary: Colors.amber,
    secondary: Colors.grey.shade700,
    inversePrimary: Colors.grey.shade100,
  ),
);
Enter fullscreen mode Exit fullscreen mode

Utils

Helper functions like truncateTo live in the utils directory, simplifying minor but repetitive tasks.

String truncateTo({required String text, int to = 18}) {
  return text.length > to ? '${text.substring(0, to)}...' : text;
}
Enter fullscreen mode Exit fullscreen mode

The Entry Point

Finally, the main.dart file initializes the app, applies the theme, and defines the starting screen.

void main() {
  runApp(const MovieX());
}
Enter fullscreen mode Exit fullscreen mode

What’s Next?

The Movie X project is a great example of how to structure a Flutter app for efficiency and scalability. Whether you're a seasoned developer or just starting out, this repository can help you learn or refine your project organization skills.

Explore the Codebase

👉 GitHub Repository

Have any feedback or ideas for improvement? Drop your thoughts in the comments or open an issue on GitHub. Let’s build better apps together! 💡


Final Thoughts

Creating Movie X was a fantastic journey in balancing functionality and code quality. I hope you find the structure as inspiring and useful as I do. What’s your approach to organizing your Flutter projects? Let me know! 😊


Follow Me for More!
Stay connected for more tips, tutorials, and resources:

GitHub
YouTube
LinkedIn

Happy coding!✌️❤️

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay