DOCSEARCHbyAlgolia
Submit Docs

Flutter Forge Documentation

website·Indexed 31 days ago

https://flutter-forge.dev

A framework for modular UI modeling in Flutter. It provides a structured architecture using Components, Stores, Actions, Reducers, and Effects, with built-in support for AsyncState, widget testing, and integration with Riverpod.

Tokens
9.2K
Snippets
36
Records
54
Agent score
51%

What's inside Flutter Forge

  1. Build Complex Components via Composition

    Flutter Forge employs the principle of Composition, enabling developers to build complex UI components by assembling smaller, simpler components.

  2. Interact with external systems using Effects and Environment

    Flutter Forge separates pure state logic from effectful code (interactions with external systems like REST or GraphQL APIs) using two primary concepts: Effects and Environment. Effects formalize the separation of non-pure code, while the Environment handles the dependency injection of external services. This architecture ensures that the reducer remains pure and the system is easily testable.

  3. Override Component UI while Preserving Business Logic

    Flutter Forge supports UI Overrides, allowing a developer to keep a component's business logic intact while replacing only the visual presentation. This is particularly useful when using components from a shared library across multiple apps that require different styling to match their respective brand identities.

  4. Understand the role of Actions in Flutter Forge

    Actions in Flutter Forge are specialized messages sent from a Widget to its Store to trigger state changes. They represent either a user interaction within the Widget or the result of an Effect (side-effecting work). This follows the Redux pattern: Actions flow to the Store, which updates the State, which the View then consumes to update the UI.

  5. Understand the Environment concept in Flutter Forge

    In Flutter Forge, an Environment is a mechanism for formal dependency injection into a Component. Conceptually, it is an entity that holds all the information a component needs to access external dependencies. In practice, an Environment is simply a plain Dart class that you define and create; it does not need to extend a base class or follow specific technical restrictions.

  6. Understand the Store concept in Flutter Forge

    A Store in Flutter Forge acts as a State Store. Its primary responsibility is to facilitate the observation and management of state changes within the application.

  7. Understand the Flutter Forge Component Architecture

    Flutter Forge uses a composable architecture based on the Redux pattern. The primary unit of organization is the Component, which encapsulates the following elements:

    • Widget: The UI layer.
    • Store: Manages the state and coordinates business logic.
    • State: The data representing the current condition of the component.
    • Reducer: A pure function that evaluates an Action and the current State to compute a new State and optional Effects.
    • Actions: Events triggered by the UI or Effects that describe 'what happened'.
    • Effects: Side effects triggered by the Reducer that can perform asynchronous work and return new Actions back to the Store.
    • Environment: Dependencies required by the component's logic.

  8. Understand the Flutter Forge Component architecture

    In Flutter Forge, a Component is the base unit for modular UI modeling. It wraps UI concerns and business logic into a modular, testable, and composable package. Technically, a Component is a bundle consisting of a Widget and a Store. The Store acts as the formal interface for the component, managing state changes over time and facilitating observability. To define a complete component interface, the Store requires three generic types: State, Environment, and Action.

  9. Manage State and State Changes in Flutter Forge

    Flutter Forge utilizes a state-based UI approach where each component has its own state that defines the view (conceptually: View = f(State)). To handle updates, Flutter Forge provides a mechanism for controlled, unidirectional state changes to avoid common pitfalls associated with state management libraries.

  10. Implement Modular Software Design in Flutter Forge

    Flutter Forge promotes Modular Software Design to achieve loosely coupled and strongly cohesive components. This approach allows developers to make changes or replace components without affecting others and simplifies the process of extracting components into standalone libraries. The library provides a built-in structure to help developers achieve this design automatically within the UI component space.

  11. Develop and Test Components in Isolation with Flutter Forge

    Flutter Forge is designed to support the development of complex widgets in isolation, removing application-level complexities. This enables a two-phase development workflow: first, develop the component in isolation; second, integrate the component into the application using Flutter Forge's composition support. Additionally, the library is designed to support Test-Driven Development (TDD) and Outside-In development without requiring complex testing setups.

  12. Trigger Effects from a Reducer

    Effects are triggered within a Reducer. When handling an Action, the Reducer returns a ReducerTuple containing the updated State and an array of EffectTask objects. The Store then processes these effects.
    final someComponentReducer = 
    Reducer<SomeWidgetState, SomeWidgetEnvironment, SomeWidgetAction>(
        (state, action) {
  switch (action) {
    case Load _:
      return ReducerTuple(
        SomeWidgetState(count: state.count, name: "Loading..."), 
        [SomeWidgetEffects.loadNameEffect]
      );
  }
});