Flutter Stacked Architecture Generator

Flutter Stacked Architecture Generator

Stacked Architecture Package

Flutter one of the rising popular frameworks today is being used widely to develop mobile applications. It is an open source project by Google meant to make development of applications much easier. This UI framework allows developers to create their applications quickly. Google has expanded the framework and gone much beyond mobile i.e iOS and Android. As of today this framework now supports web in a beta stage and desktop applications in alpha stage.

Having such a powerful framework that lets you build applications through a single codebase is simply amazing. Flutter framework works well with UI but its setState architecture does not allow you to share state data across the various pages of our application easily. This is where state management comes into picture.

Flutter has various different kinds of state management practices such as Inherited Widgets, Redux, Bloc, Cubit, MobX and so on.

FilledStacks is one such flutter developer who has built his own style of writing flutter code using MVVM architecture. His approach consists writing MVVM without two way binding. His approach is a wrapper around the current existing packages i.e

  1. Provider
  2. Get_it

The first package that was built was provider_architecture. Improving upon it and to reduce the amount of boilerplate code a second version of the package was rebranded and released known as stacked.

Taking up inspiration from the previous package for VS Code i.e Flutter MVVM Architecture Generator, a new package Flutter Stacked Architecture Generator has been developed.

The extension supports generation of the basic files that will be needed by a flutter project that is using stacked package.

Extension Settings

  1. Initialize Architecture - stackedExtension.initializeArchitecture
  2. Create Views - stackedExtension.createViews
  3. Create Widgets - stackedExtension.createWidget
  4. Regenerate Routes - stackedExtension.regenerateRoutes

Initialise Architecture

  • This command generates the initial files and folders needed and updates the pubsec.yaml file to contain the packages needed.
  • Architecture can be of two types Mobile or Responsive

  • Files & Folders Generated for Responsive

    .
    ├── README.md
    ├── android
    ├── ios
    ├── lib
    │   ├── core
    │   │   ├── base
    │   │   │   ├── base_model.dart
    │   │   │   └── base_service.dart
    │   │   ├── locator.dart
    │   │   ├── logger.dart
    │   │   ├── models
    │   │   ├── router.dart
    │   │   ├── router.json
    │   │   ├── router_constants.dart
    │   │   └── services
    │   ├── main.dart
    │   ├── theme
    │   ├── views
    │   │   └── splash
    │   │       ├── splash_desktop.dart
    │   │       ├── splash_mobile.dart
    │   │       ├── splash_tablet.dart
    │   │       ├── splash_view.dart
    │   │       └── splash_view_model.dart
    │   └── widgets
    │       ├── dumb_widgets
    │       └── smart_widgets
    ├── myapp.iml
    ├── pubspec.lock
    ├── pubspec.yaml
    ├── stackedConfig.json
    ├── test
    │   └── widget_test.dart
    └── web
    
  • Files & Folders generated for Mobile

    .
    ├── README.md
    ├── android
    ├── ios
    ├── lib
    │   ├── core
    │   │   ├── base
    │   │   │   ├── base_model.dart
    │   │   │   └── base_service.dart
    │   │   ├── locator.dart
    │   │   ├── logger.dart
    │   │   ├── models
    │   │   ├── router.dart
    │   │   ├── router.json
    │   │   ├── router_constants.dart
    │   │   └── services
    │   ├── main.dart
    │   ├── theme
    │   ├── views
    │   │   └── splash
    │   │       ├── splash_view.dart
    │   │       └── splash_view_model.dart
    │   └── widgets
    │       ├── dumb_widgets
    │       └── smart_widgets
    ├── myapp.iml
    ├── pubspec.lock
    ├── pubspec.yaml
    ├── stackedConfig.json
    ├── test
    │   └── widget_test.dart
    └── web
    
  • Updating Pubsec YAML File

    get_it: ^4.0.4
    logger: ^0.9.2
    stacked: ^1.7.6
    stacked_services: ^0.5.4+2
    responsive_builder: ^0.2.0+2
    equatable: ^1.2.4
    

Create Views

  • Running this command creates the views based on the architecture selected in Initialise Architecture Command (i.e. Responsive or Mobile views)
  • The views are created in the views folder based on the path provided
  • The path may include subfolders and this folders will be created if they do not exist
  • The view will be added in router

Create Widgets

  • Running this command will generate widgets in lib/widgets folder
  • Widgets can be of two types
    • Dumb Widgets: Widgets without a view model
    • Smart Widgets: Widgets with a view model

Regenerate Routes

  • This command allows you to rename the routes and their path
  • The route names and paths can be edited in router.json file located in core. It is generated during initialize architecture

Hopefully this extension makes it easier to use the stacked package with VS Code. Special thanks to Dane Mackier whose Architecture we are following here.

Checkout the GitHub repo. If you have any questions or suggestions do help by creating issues or contributing in the form of pull requests

The extension is available on Marketplace