Flutter State Management: MVC Pattern Example for Building a Counter App

 

Create Model of models/counter_model.dart

class CounterModel {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }

  void decrement() {
    _count--;
  }
}

 Create Controller of controllers/counter_controller.dart

import '../models/counter_model.dart';

class CounterController {
  CounterModel model = CounterModel();

  int get count => model.count;

  void increment() {
    model.increment();
  }

  void decrement() {
    model.decrement();
  }
}

Create view of views/counter_view.dart

import 'package:flutter/material.dart';
import '../controllers/counter_controller.dart';

class CounterView extends StatefulWidget {
  const CounterView({super.key});

  @override
  State<CounterView> createState() => _CounterViewState();
}

class _CounterViewState extends State<CounterView> {
  final CounterController _controller = CounterController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Count:',
              style: TextStyle(fontSize: 24.0),
            ),
            Text(
              '${_controller.count}',
              style:
                  const TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.increment();
                    setState(() {});
                  },
                  child: const Icon(Icons.add),
                ),
                const SizedBox(width: 16.0),
                ElevatedButton(
                  onPressed: () {
                    _controller.decrement();
                    setState(() {});
                  },
                  child: const Icon(Icons.remove),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

In change in main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
          return MaterialApp(
           title: 'Counter App',
           theme: ThemeData(
              useMaterial3: true,
              colorScheme: ColorScheme(
                primary: Colors.orange,
                secondary: Colors.amber,
                background: Colors.white,
                surface: Colors.white,
                brightness: Brightness.light,
                error: Colors.red[900]!,
                onPrimary: Colors.white,
                onSecondary: Colors.white,
                onBackground: Colors.black,
                onSurface: Colors.black,
                onError: Colors.white,
              ),
            ),
           home: CounterView(),
          );
  }
}