Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Flutter MVVM Architecture GeneratorNew to Visual Studio Code? Get it now.
Flutter MVVM Architecture Generator

Flutter MVVM Architecture Generator

Madhukesh

|
70,446 installs
| (4) | Free
VsCode extension to generate boilerplate code when using FilledStack's responsive architecture using Providers
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Flutter Extensions GitHub Visual Studio Marketplace Downloads Visual Studio Marketplace Rating (Stars)

Flutter MVVM Architecture Generator Visual Studio Marketplace Version

VsCode extension to generate boilerplate code when using FilledStacks' responsive architecture using Providers

Features

Initialize Architecture

Initialize the project with the following project structure:

--root
    |-- android
    |-- build
    |-- ios
    |-- lib
        |-- core
            |-- base
                |-- base_model.dart
                |-- base_service.dart
                |-- base_view_model.dart
            |-- models
            |-- services
                |-- navigation_service.dart
            locator.dart
            logger.dart
            providers.dart
        |-- theme
        |-- views
            |-- home
                |-- home_desktop.dart
                |-- home_mobile.dart
                |-- home_tablet.dart
                |-- home_view_model.dart
                |-- home_view.dart
        |-- widgets
        main.dart
    |-- test
    |-- .gitignore
    |-- pubspec.yaml

It will also add the following dependencies to the pubspec.yaml file

  • responsive_builder: ^0.1.4
  • provider: ^3.2.0
  • logger: ^0.7.0+2
  • get_it: ^3.0.3
  • equatable: ^1.0.1

Initializing the architecture

Create View

The create view command will add a View, a ViewModel and the responsive variants for Tablet, Mobile and Desktop.

Create View

As of version 1.4.0 you can create sub folders for views.

Example

If you give parameter for class name as intro/splash/demo, the extension will create a directory structure like this

--root
    |-- android
    |-- ios
    |-- lib
        |-- core
        |-- views
            |-- intro
                |-- splash
                    |-- demo
                        |-- demo_view.dart
                        |-- demo_view_model.dart
                        |-- demo_tablet.dart
                        |-- demo_mobile.dart
                        |-- demo_desktop.dart
            |-- main.dart
        |-- theme
        |-- main.dart
    |-- test
    |-- pubspec.yaml

Create Widget

This command will create a Widget in the lib/widgets folder with the initial boilerplate and responsive variants.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft