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
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');
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
}
}
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';
// ...
}
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});
}
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),
),
);
}
}
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;
}
}
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],
);
}
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,
),
);
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;
}
The Entry Point
Finally, the main.dart file initializes the app, applies the theme, and defines the starting screen.
void main() {
runApp(const MovieX());
}
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
👉
Happy coding!✌️❤️
SOCIAL SHARE CARD GENERATOR