# rrifafauzikomara/flutter_modularization architecture

> Architecture diagram of the GitHub repository rrifafauzikomara/flutter_modularization, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rrifafauzikomara/flutter_modularization
- Repository: https://github.com/rrifafauzikomara/flutter_modularization

## Overview

1. **Repository purpose**
   - This is a Flutter mobile app demonstrating “modularization” by splitting the codebase into clear feature and infrastructure folders.
   - The app is a movie-catalog style UI, with list and detail views, and the README indicates it was used to explore different modularization approaches across branches.

2. **Top-level runtime boundary**
   - The actual app runtime is the Flutter framework, with a single Dart entrypoint at `lib/main.dart`.
   - Native Android and iOS folders are standard Flutter host shells; they mainly provide app launch/configuration and do not appear to contain business logic.

3. **Presentation layer**
   - `lib/ui/` contains the main screens:
     - `home_page.dart` for the primary browse/list experience
     - `detail_page.dart` for the selected movie’s detail view
   - This is the topmost UI boundary where app navigation and screen composition happen.

4. **Reusable UI components**
   - `lib/widget/` holds reusable, presentation-only building blocks such as:
     - movie cards and posters
     - genre chips
     - rating and storyline sections
     - detail header/banner elements
   - These widgets reduce duplication and keep screen files focused on layout and orchestration rather than raw UI rendering.

5. **Data and network boundary**
   - `lib/network/api/api_provider.dart` is the key integration point for fetching movie data from an external API.
   - This layer is separated from the UI, so screens consume data through a network abstraction rather than embedding request logic directly.

6. **Domain/data models**
   - `lib/network/model/movie.dart` and `lib/network/model/genres.dart` define the structured data consumed by the UI.
   - These model classes form the contract between API responses and visual components, helping keep parsing/representation isolated from widget code.

7. **Shared utilities**
   - `lib/common/color_helper.dart` centralizes color-related constants or helpers used across the UI.
   - This is a small shared utility boundary for consistency and theming.

8. **Likely data flow through the app**
   - `main.dart` boots the app and routes into the screen tree.
   - The home screen obtains movie data via `ApiProvider`, maps it into model objects, and renders a list using reusable widgets.
   - Selecting an item navigates to `detail_page.dart`, which composes multiple detail widgets using the same model data.

9. **State and architecture style**
   - From the file structure, this is a relatively lightweight Flutter architecture: screen widgets orchestrate data retrieval and composition, while the network/model layer is separated but not deeply layered into repositories/use-cases.
   - The README references a BLoC branch, but this tree itself looks like the simpler, non-BLoC modularized version.

10. **Platform-specific shells**
   - `android/` and `ios/` only contain generated app scaffolding, launch assets, manifests, and entry classes (`MainActivity.kt`, `AppDelegate.swift`).
   - They are important for deployment, but the app’s functional architecture lives in Dart under `lib/`.

11. **Testing**
   - `test/widget_test.dart` provides the standard Flutter test entrypoint, suggesting minimal automated coverage in this snapshot.
   - No separate backend, service, or local persistence subsystem is visible in this repository layout.

12. **Diagram takeaway**
   - The cleanest architecture view is: Flutter app entrypoint → UI screens → reusable widgets, with screens depending on the network API layer and model layer, plus a small shared utility layer for common styling.

Main entry points: [`lib/ui/detail_page.dart`](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/ui/detail_page.dart) (Detail page), [`lib/ui/home_page.dart`](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/ui/home_page.dart) (Home page), [`lib/main.dart`](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/main.dart) (App entry), [`lib/network/api/api_provider.dart`](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/network/api/api_provider.dart) (API provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_lib["lib"]
  node_main["App entry<br/>Flutter bootstrap<br/>[main.dart]"]
  node_home_page["Home page<br/>Screen<br/>[home_page.dart]"]
  node_detail_page["Detail page<br/>Screen<br/>[detail_page.dart]"]
  node_api_provider[("API provider<br/>Network API<br/>[api_provider.dart]")]
  node_movie_model["Movie model<br/>Data model<br/>[movie.dart]"]
  node_genres_model["Genres model<br/>Data model<br/>[genres.dart]"]
  node_color_helper(("Color helper<br/>Shared util<br/>[color_helper.dart]"))
  node_movie_card["Movie card<br/>UI widget"]
  node_poster["Poster<br/>UI widget<br/>[poster.dart]"]
  node_genre_chip["Genre chip<br/>UI widget"]
  node_detail_header["Detail header<br/>UI widget"]
  node_banner_image["Banner image<br/>UI widget"]
  node_rating_info["Rating info<br/>UI widget"]
  node_story_line["Story line<br/>UI widget<br/>[story_line.dart]"]
end

subgraph group_grp_android["android"]
  node_android_shell{{"Android shell<br/>Platform host<br/>[MainActivity.kt]"}}
end

subgraph group_grp_ios["ios"]
  node_ios_shell{{"iOS shell<br/>Platform host<br/>[AppDelegate.swift]"}}
end

subgraph group_grp_test["test"]
  node_widget_test["Widget test<br/>Test entrypoint<br/>[widget_test.dart]"]
end

node_main -->|"boots"| node_home_page
node_home_page -->|"loads data"| node_api_provider
node_home_page -->|"renders"| node_movie_model
node_home_page -->|"uses"| node_movie_card
node_home_page -.->|"styles"| node_color_helper
node_detail_page -->|"consumes"| node_movie_model
node_detail_page -->|"composes"| node_detail_header
node_detail_page -->|"shows"| node_poster
node_detail_page -->|"shows"| node_genre_chip
node_detail_page -->|"shows"| node_rating_info
node_detail_page -->|"shows"| node_story_line
node_detail_page -->|"shows"| node_banner_image
node_detail_page -.->|"styles"| node_color_helper
node_api_provider -->|"maps to"| node_movie_model
node_api_provider -->|"maps to"| node_genres_model
node_android_shell -.->|"launches"| node_main
node_ios_shell -.->|"launches"| node_main
node_widget_test -.->|"exercises"| node_main

click node_main "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/main.dart"
click node_home_page "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/ui/home_page.dart"
click node_detail_page "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/ui/detail_page.dart"
click node_api_provider "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/network/api/api_provider.dart"
click node_movie_model "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/network/model/movie.dart"
click node_genres_model "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/network/model/genres.dart"
click node_color_helper "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/common/color_helper.dart"
click node_movie_card "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/card_list_movie.dart"
click node_poster "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/poster.dart"
click node_genre_chip "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/chip_genre_movie.dart"
click node_detail_header "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/movie_detail_header.dart"
click node_banner_image "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/arc_banner_image.dart"
click node_rating_info "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/rating_information.dart"
click node_story_line "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/story_line.dart"
click node_android_shell "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/android/app/src/main/kotlin/com/rifafauzi/flutter_modularization/MainActivity.kt"
click node_ios_shell "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/ios/Runner/AppDelegate.swift"
click node_widget_test "https://github.com/rrifafauzikomara/flutter_modularization/blob/master/test/widget_test.dart"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_home_page,node_detail_page,node_api_provider,node_movie_model,node_genres_model,node_color_helper,node_movie_card,node_poster,node_genre_chip,node_detail_header,node_banner_image,node_rating_info,node_story_line toneBlue
class node_android_shell toneAmber
class node_ios_shell toneMint
class node_widget_test toneRose
```

## Components

### lib

Flutter application code

- [App entry](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/main.dart): Flutter bootstrap · Bootstraps the app and hands off into the screen tree. · `lib/main.dart`
- [Home page](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/ui/home_page.dart): Screen · Primary browse screen for listing movies. · `lib/ui/home_page.dart`
- [Detail page](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/ui/detail_page.dart): Screen · Movie detail screen composed from shared widgets. · `lib/ui/detail_page.dart`
- [API provider](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/network/api/api_provider.dart): Network API · External movie data access and request boundary. · `lib/network/api/api_provider.dart`
- [Movie model](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/network/model/movie.dart): Data model · Structured movie data consumed by the UI. · `lib/network/model/movie.dart`
- [Genres model](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/network/model/genres.dart): Data model · Structured genre data used by screens and widgets. · `lib/network/model/genres.dart`
- [Color helper](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/common/color_helper.dart): Shared util · Common color constants or helpers for consistent styling. · `lib/common/color_helper.dart`
- [Movie card](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/card_list_movie.dart): UI widget · Reusable list item presentation for movie browsing. · `lib/widget/card_list_movie.dart`
- [Poster](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/poster.dart): UI widget · Poster and artwork rendering component. · `lib/widget/poster.dart`
- [Genre chip](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/chip_genre_movie.dart): UI widget · Chip-style genre display used in movie views. · `lib/widget/chip_genre_movie.dart`
- [Detail header](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/movie_detail_header.dart): UI widget · Top banner/header composition for the detail page. · `lib/widget/movie_detail_header.dart`
- [Banner image](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/arc_banner_image.dart): UI widget · Arc/banner image treatment used in detail layouts. · `lib/widget/arc_banner_image.dart`
- [Rating info](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/rating_information.dart): UI widget · Displays movie rating and related metadata. · `lib/widget/rating_information.dart`
- [Story line](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/lib/widget/story_line.dart): UI widget · Synopsis and storyline presentation block. · `lib/widget/story_line.dart`

### android

Android host shell

- [Android shell](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/android/app/src/main/kotlin/com/rifafauzi/flutter_modularization/MainActivity.kt): Platform host · Generated Android launcher, manifest, and native entrypoint scaffolding. · `android/app/src/main/kotlin/com/rifafauzi/flutter_modularization/MainActivity.kt`

### ios

iOS host shell

- [iOS shell](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/ios/Runner/AppDelegate.swift): Platform host · Generated iOS launcher, plist, and native app scaffolding. · `ios/Runner/AppDelegate.swift`

### test

Flutter test entrypoint

- [Widget test](https://github.com/rrifafauzikomara/flutter_modularization/blob/master/test/widget_test.dart): Test entrypoint · Standard Flutter test harness for the app. · `test/widget_test.dart`

## Connections

- App entry → Home page: boots · Application startup routes into the main browsing UI.
- Home page → API provider: loads data · Home screen fetches movie data through the API boundary.
- Home page → Movie model: renders · Home screen consumes movie records for list presentation.
- Home page → Movie card: uses · List items are rendered with reusable movie card widgets.
- Home page → Color helper: styles · Shared color helpers support consistent presentation.
- Detail page → Movie model: consumes · Detail screen receives the selected movie data.
- Detail page → Detail header: composes · Top section is built from dedicated header widgets.
- Detail page → Poster: shows · Uses poster rendering for artwork display.
- Detail page → Genre chip: shows · Displays genre metadata with chip widgets.
- Detail page → Rating info: shows · Displays rating information as a dedicated block.
- Detail page → Story line: shows · Displays synopsis content in its own section.
- Detail page → Banner image: shows · Uses banner artwork treatment in the detail layout.
- Detail page → Color helper: styles · Shared color helpers support consistent presentation.
- API provider → Movie model: maps to · API responses are converted into movie model objects.
- API provider → Genres model: maps to · API responses are converted into genre model objects.
- Android shell → App entry: launches · Native Android shell launches the Flutter entrypoint.
- iOS shell → App entry: launches · Native iOS shell launches the Flutter entrypoint.
- Widget test → App entry: exercises · Standard test harness targets the app bootstrap.