Skip to content

Installation

Efra Espada edited this page Jul 3, 2024 · 9 revisions

In this section you will find all the information you need to set up your project and start working with go_mvp, the go_router navigation system and the handling of states with object.

Requeriments

Before continuing you should note that go_mvp must work with 2 dependencies:

Pub Version Pub Version

A package that provides utilities for serializing and deserializing Dart objects to and from JSON format. This library simplifies the process of converting Dart objects to JSON and vice versa, making it easier to work with JSON data in Dart applications.

Although this library is provided by go_mvp, it must be explicitly implemented for command line refreshing of models.

Pub Version Pub Version

A routing package that simplifies navigation and deep linking. It provides a declarative API to define routes and manage navigation, making it easier to handle complex routing scenarios, nested navigation, and URL parameters. The package supports redirection, route guards, and a seamless integration with Flutter's state management solutions.

It is not necessary to implement this library directly, go_mvp provides it.

Project configuration

Before you start creating screens with an MVP architecture, you need to set up a few things:

pubspec.yaml

dependencies:
  go_mvp: ^1.1.0
  object: ^1.1.1

go_mvp:
  baseProjectFolder: 'lib'
  outputFolder: 'ui'                              # resulting output folder lib/ui/
  modelsFile: 'data/model/generated/model.g.dart' # resulting output folder lib/data/model/generated/model.g.dart
  • baseProjectFolder: Base project directory, commonly lib.
  • outputFolder: Directory where the new screens will be created.
  • modelsFile: Path where the object class generation file is located.

Routes

Define your application routes in the usual way as you do for go_router.

router.dart

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: MainPage.routeName,
      pageBuilder: (context, state) => MainPage().pageFor(state),
      routes: [
        GoRoute(
          path: SecondaryPage.routeName,
          pageBuilder: (context, state) => SecondaryPage().pageFor(state),
        ),
      ],
    ),
  ],
  observers: [
    routeObserver,
  ],
  errorPageBuilder: (context, state) {
    return MaterialPage(
      key: state.pageKey,
      child: Scaffold(
        body: Center(
          child: Text(state.error.toString()),
        ),
      ),
    );
  },
);

Prepare the app

Initialize the AppManager with the router and model class generated by object.

main.dart

The Model() class is generated by the object package. Depending on the configuration set for the object package, this class could have another name, but by default it is Model.

void main() {
  AppManager().configure(
    router: router,
    object: Model(),
    debug: false,
    lowPerformance: false,
    refreshLatency: 500,
    slashResolution: '',
    additionalClasses: [],
    screenVisible: (String screen) async {
      // do something with the visible screen information
    },
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => const AppWidget(
        title: "Example App",
      );
}

AppWidget extends MaterialApp.router, so all parameters are provided for optimal configuration. Although AppWidget is recommended, you can use MaterialApp.router if you prefer:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp.router(
        key: AppManager().global,
        scaffoldMessengerKey: AppManager().scaffoldMessengerKey,
        routerConfig: AppManager().router,
        title: "Example App",
      );
}

Create new screens

Run this command for creating new screens:

dart run go_mvp:create_screen other_screen

- lib
    |
    | ui
        |
        | other_screen
           |
           | domain
           |    |
           |    | other_screen_state.dart
           |
           | model
           |    |
           |    | base_other_screen_view_model.dart
           |    |
           |    | other_screen_view_model.dart
           |
           | presenter
           |    |
           |    | base_other_screen_presenter.dart
           |    |
           |    | other_screen_presenter.dart
           |
           | view
           |    |
           |    | other_screen_page_state.dart
           |    |
           |    | other_screen_view.dart
           |
           | other_screen_page.dart  
           |
           | other_screen_types.dart