flutter_mvc 5.0.0

A state management framework that focuses on the separation of UI and logic.

flutter_mvc

flutter_mvc is a Flutter state management framework focused on separating UI from business logic. It uses the MVC (Model-View-Controller) design pattern, combined with modern programming concepts like dependency injection and service location, to provide a clear, maintainable, and scalable application architecture.

English | 简体中文

Features

• Separation of Concerns: Strictly divides Model (data), View (UI), and Controller (logic) to make code responsibilities clearer.
• Dependency Injection: A powerful built-in dependency injection system that easily manages object lifecycles and dependencies, while allowing you to streamline Controllers by distributing logic into service objects.
• Widget-to-Object Dependency: Through dependency injection, you can make a single Widget dependent on a specific type of object, triggering widget rebuilds when the object is updated.
• Store State Management: The framework provides a lightweight state management solution, supporting state management in Controllers and any dependency-injected object, and automatically updating the UI that depends on that state.
• Lifecycle Management: Provides clear lifecycle methods for Controllers and any dependency-injected objects.
• Context Access: You can easily obtain the BuildContext for any dependency-injected object.
• Precise Widget Targeting: Similar to querySelector in web development, you can precisely target and update widgets by ID, Class, or even Widget type.

Dependency Injection

flutter_mvc is built on the powerful dependency injection library dart_dependency_injection, which allows you to associate dependency-injected objects with widgets to unlock powerful features. For more details, please refer to the Dependency Injection chapter.

flutter_mvc has an internal dependency injection scope tree, so you must use an MvcApp as the root widget to provide the root dependency injection container.

Counter Example

import 'package:flutter/material.dart';
import 'package:flutter_mvc/flutter_mvc.dart';

void main() {
  runApp(
    MvcApp(
      child: Mvc<CounterController, void>(
        create: () => CounterController(),
      ),
    ),
  );
}

class CounterState {
  CounterState(this.count);
  int count;
}

class CounterController extends MvcController<void> {
  @override
  void init() {
    stateScope.createState(CounterState(0));
  }

  void increment() {
    stateScope.setState(
      (CounterState state) {
        state.count++;
      },
    );
  }

  @override
  MvcView view() {
    return CounterView();
  }
}

class CounterView extends MvcView<CounterController> {
  @override
  Widget buildView() {
    return Builder(
      builder: (context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: const Text('Flutter Demo Home Page')),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('You have pushed the button this many times:'),
                  Builder(
                    builder: (context) {
                      final count = context.stateAccessor.useState((CounterState state) => state.count);
                      return Text(
                        '$count',
                        style: Theme.of(context).textTheme.headlineMedium,
                      );
                    },
                  ),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: controller.increment,
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
          ),
        );
      },
    );
  }
}

Documentation

• Dependency Injection
• MVC Basics
• Store State Management
• CSS Selectors
• Widget-to-Object Dependency