fluttermodel-view-controllermobile-applicationflutter-getx

What is the recommended folder structure for a Flutter project using GetX with MVC architecture?


I'm currently building a Flutter application and planning to use the GetX package for:

State management

Routing

Dependency injection

I would also like to follow the MVC (Model-View-Controller) architecture to keep my code modular, testable, and clean.

I need help understanding how to organize my project folder effectively when combining GetX with MVC. Specifically: Where should the following files go?

Models

Views (UI Widgets)

Controllers (GetxController classes)

How should I organize:

Routes (GetMaterialApp / GetPage)

Bindings (initial dependency injection)

How can I keep the structure scalable as the app grows, especially when I have many features or modules?


Solution

  • If you're currently using GetX with the MVC pattern, I highly recommend checking out this GitHub repository: Flutter-MVC-Template. It’s a well structured template that effectively combines GetX’s powerful features—like state management, routing, and dependency injection—with a clean MVC project structure.

    Here’s another MVC structure that’s quite good as well.

    lib/
    ├── data/
    │   └── models/
    │       └── user_model.dart
    ├── modules/
    │   ├── splash/
    │   │   ├── controller/splash_controller.dart
    │   │   ├── view/splash_view.dart
    │   │   └── binding/splash_binding.dart
    │   ├── auth/
    │   │   ├── controller/login_controller.dart
    │   │   ├── controller/register_controller.dart
    │   │   ├── view/login_view.dart
    │   │   ├── view/register_view.dart
    │   │   └── binding/auth_binding.dart
    │   ├── home/
    │   │   ├── controller/home_controller.dart
    │   │   ├── view/home_view.dart
    │   │   └── binding/home_binding.dart
    ├── routes/
    │   ├── app_pages.dart        # Route configuration (page + binding)
    │   └── app_routes.dart       # Route name constants
    ├── services/
    │   └── auth_service.dart     # API or local service logic
    ├── themes/
    │   └── app_theme.dart        # App theme definitions
    ├── main.dart                 # App entry point
    

    Both the structure are well-suited for large, scalable Flutter projects—choose the one that best fits your team’s preferences and workflow.