Organising an MVVM Project: Folders, Services and get_itڕێکخستنی پڕۆژەیەکی MVVM: فۆڵدەرەکان، خزمەتگوزارییەکان و ⁦get_it⁩

architecture_mvvm/
└── lib/
    ├── main.dart
    ├── app/
    │   ├── dependencies.dart          (service registry)
    │   ├── router.dart
    │   └── other_app_wide_stuff.dart
    ├── models/
    │   ├── todo.dart
    │   └── user.dart
    ├── screens/
    ├── widgets/
    └── services/

screens/
├── view.dart                    (generic view class)
├── viewmodel.dart               (generic view model class)
├── login/
│   ├── login_view.dart
│   ├── login_viewmodel.dart
│   └── widgets/
├── todolist/
│   ├── todolist_view.dart
│   ├── todolist_viewmodel.dart
│   └── widgets/
│       ├── appbar_view.dart
│       └── todo_view.dart
└── other_screen/
    ├── other_view.dart
    ├── other_viewmodel.dart
    └── widgets/
widgets/                         (shared widgets)

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

import '../../../models/todo.dart';
import '../todolist_viewmodel.dart';

// One to-do row. Taps become events for the view model.
class TodoView extends StatelessWidget {
  const TodoView(this.todo, {super.key});

  final Todo todo;

  @override
  Widget build(BuildContext context) {
    final viewModel = context.read<TodoListViewModel>();
    return ListTile(
      title: Text(
        todo.title,
        style: TextStyle(
          decoration: todo.completed ? TextDecoration.lineThrough : null,
        ),
      ),
      subtitle: Text('id: ${todo.id}'),
      onTap: () => viewModel.toggle(todo),
      onLongPress: () => viewModel.delete(todo),
    );
  }
}

import 'package:flutter/material.dart';

import '../models/user.dart';

// Shared by the login screen and the to-do screen.
class UserAvatar extends StatelessWidget {
  const UserAvatar(this.user, {super.key});

  final User user;

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(child: Text(user.name[0]));
  }
}

import 'package:flutter/foundation.dart';

// The generic view model: every screen's view model extends it.
abstract class ViewModel extends ChangeNotifier {
  bool _busy = false;

  bool get busy => _busy; // true while data is loading

  @protected
  void setBusy(bool value) {
    _busy = value;
    notifyListeners();
  }
}

import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';

import 'viewmodel.dart';

// The generic view: gives one view its own provider and consumer.
// (Not named View: Flutter already has a widget called View.)
class BaseView<T extends ViewModel> extends StatelessWidget {
  const BaseView({super.key, required this.viewModel, required this.builder});

  final T viewModel; // taken from the service locator
  final Widget Function(BuildContext context, T viewModel, Widget? child)
      builder;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<T>.value(
      value: viewModel, // .value: the locator owns it, not this widget
      child: Consumer<T>(builder: builder),
    );
  }
}

import 'package:flutter/material.dart';

import '../../app/dependencies.dart';
import '../../app/router.dart' as router;
import '../../widgets/user_avatar.dart';
import '../view.dart';
import 'login_viewmodel.dart';

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

  @override
  Widget build(BuildContext context) {
    return BaseView<LoginViewModel>(
      viewModel: dependency<LoginViewModel>(),
      builder: (context, viewModel, _) => Scaffold(
        appBar: AppBar(title: const Text('Choose a user to log in as')),
        body: viewModel.busy
            ? const Center(child: CircularProgressIndicator())
            : ListView(
                children: [
                  for (final user in viewModel.users)
                    ListTile(
                      leading: UserAvatar(user),
                      title: Text(user.name),
                      subtitle: Text('user id: ${user.id}'),
                      onTap: () {
                        viewModel.logInAs(user); // an event for the view model
                        Navigator.of(context).pushNamed(router.todoList);
                      },
                    ),
                ],
              ),
      ),
    );
  }
}

services/
├── rest.dart
├── firebase.dart
├── todo/
│   ├── todo_service.dart            (abstract class)
│   ├── todo_service_rest.dart       (implementation class)
│   ├── todo_service_mock.dart       (implementation class)
│   └── todo_service_firebase.dart   (implementation class)
└── user/
    ├── user_service.dart            (abstract class)
    ├── user_service_rest.dart       (implementation class)
    ├── user_service_mock.dart       (implementation class)
    └── user_service_firebase.dart   (implementation class)

import '../../models/todo.dart';

// What every to-do service can do. No code here: only the promises.
abstract class TodoService {
  Future<List<Todo>> getTodoList(int userId);
  Future<Todo> addTodo(int userId, String title);
  Future<void> updateTodo(Todo todo);
  Future<void> deleteTodo(int id);
}

import '../../models/todo.dart';
import '../rest.dart';
import 'todo_service.dart';

// The real one: talks to the REST server.
class TodoServiceRest implements TodoService {
  TodoServiceRest(this._rest);

  final RestService _rest;

  @override
  Future<List<Todo>> getTodoList(int userId) async {
    final json = await _rest.get('todos?userId=$userId') as List<dynamic>;
    return [for (final item in json) Todo.fromJson(item as Map<String, dynamic>)];
  }

  @override
  Future<Todo> addTodo(int userId, String title) async {
    final json = await _rest.post(
      'todos',
      {'userId': userId, 'title': title, 'completed': false},
    );
    return Todo.fromJson(json as Map<String, dynamic>);
  }

  @override
  Future<void> updateTodo(Todo todo) =>
      _rest.patch('todos/${todo.id}', todo.toJson());

  @override
  Future<void> deleteTodo(int id) => _rest.delete('todos/$id');
}

import '../../models/todo.dart';
import 'todo_service.dart';

// A fake one: keeps the lecture's sample to-dos in memory.
class TodoServiceMock implements TodoService {
  final List<Todo> _todos = [
    const Todo(id: 1, userId: 1, title: 'Prepare proposal for the new project'),
    const Todo(id: 2, userId: 1, title: 'Replace light bulb'),
    const Todo(id: 3, userId: 1, title: 'Buy Flutter eBook'),
    const Todo(id: 4, userId: 1, title: 'Subscribe to fibre-optic internet'),
    const Todo(id: 5, userId: 1, title: 'Set up online meeting room', completed: true),
    const Todo(id: 6, userId: 2, title: 'New task'),
    const Todo(id: 8, userId: 2, title: 'New task', completed: true),
  ];

  @override
  Future<List<Todo>> getTodoList(int userId) async =>
      _todos.where((t) => t.userId == userId).toList();

  @override
  Future<Todo> addTodo(int userId, String title) async {
    final id = _todos.fold(0, (max, t) => t.id > max ? t.id : max) + 1;
    final todo = Todo(id: id, userId: userId, title: title);
    _todos.add(todo);
    return todo;
  }

  @override
  Future<void> updateTodo(Todo todo) async {
    final i = _todos.indexWhere((t) => t.id == todo.id);
    if (i != -1) _todos[i] = todo;
  }

  @override
  Future<void> deleteTodo(int id) async => _todos.removeWhere((t) => t.id == id);
}

import '../../models/todo.dart';
import '../firebase.dart';
import 'todo_service.dart';

// Another real one: the same promises, kept with Cloud Firestore.
class TodoServiceFirebase implements TodoService {
  TodoServiceFirebase(this._firebase);

  final FirebaseService _firebase;

  @override
  Future<List<Todo>> getTodoList(int userId) async {
    final snapshot = await _firebase.db
        .collection('todos')
        .where('userId', isEqualTo: userId)
        .get();
    return [for (final doc in snapshot.docs) Todo.fromJson(doc.data())];
  }

  @override
  Future<Todo> addTodo(int userId, String title) async {
    final id = DateTime.now().millisecondsSinceEpoch;
    final todo = Todo(id: id, userId: userId, title: title);
    await _firebase.db.collection('todos').doc('$id').set(todo.toJson());
    return todo;
  }

  @override
  Future<void> updateTodo(Todo todo) =>
      _firebase.db.collection('todos').doc('${todo.id}').update(todo.toJson());

  @override
  Future<void> deleteTodo(int id) =>
      _firebase.db.collection('todos').doc('$id').delete();
}

import 'dart:convert';

import 'package:http/http.dart' as http;

// Shared by every REST service: one place for the server address.
class RestService {
  RestService({this.baseUrl = 'https://todo-api.example.com'});

  final String baseUrl;
  final http.Client _client = http.Client();

  Future<dynamic> get(String path) async {
    final response = await _client.get(Uri.parse('$baseUrl/$path'));
    return _decode(response, 'GET $path');
  }

  Future<dynamic> post(String path, Map<String, dynamic> body) async {
    final response = await _client.post(
      Uri.parse('$baseUrl/$path'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode(body),
    );
    return _decode(response, 'POST $path');
  }

  Future<dynamic> patch(String path, Map<String, dynamic> body) async {
    final response = await _client.patch(
      Uri.parse('$baseUrl/$path'),
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode(body),
    );
    return _decode(response, 'PATCH $path');
  }

  Future<void> delete(String path) async {
    final response = await _client.delete(Uri.parse('$baseUrl/$path'));
    _decode(response, 'DELETE $path');
  }

  dynamic _decode(http.Response response, String what) {
    if (response.statusCode < 200 || response.statusCode >= 300) {
      throw Exception('$what failed: HTTP ${response.statusCode}');
    }
    return response.body.isEmpty ? null : jsonDecode(response.body);
  }
}

import 'package:cloud_firestore/cloud_firestore.dart';

// Shared by every Firebase service. Firebase.initializeApp() must have run
// in main() before this is used.
class FirebaseService {
  FirebaseFirestore get db => FirebaseFirestore.instance;
}

class Todo {
  const Todo({
    required this.id,
    required this.userId,
    required this.title,
    this.completed = false,
  });

  final int id;
  final int userId;
  final String title;
  final bool completed;

  Todo copyWith({bool? completed}) => Todo(
        id: id,
        userId: userId,
        title: title,
        completed: completed ?? this.completed,
      );

  factory Todo.fromJson(Map<String, dynamic> json) => Todo(
        id: json['id'] as int,
        userId: json['userId'] as int,
        title: json['title'] as String,
        completed: json['completed'] as bool,
      );

  Map<String, dynamic> toJson() =>
      {'id': id, 'userId': userId, 'title': title, 'completed': completed};
}

import 'package:get_it/get_it.dart';

import '../screens/login/login_viewmodel.dart';
import '../screens/todolist/todolist_viewmodel.dart';
import '../services/rest.dart';
import '../services/todo/todo_service.dart';
import '../services/todo/todo_service_rest.dart';
import '../services/user/user_service.dart';
import '../services/user/user_service_rest.dart';

final dependency = GetIt.instance; // the service locator

void init() {
  // Services
  dependency.registerLazySingleton(() => RestService());
  dependency.registerLazySingleton<TodoService>(
    () => TodoServiceRest(dependency<RestService>()),
  );
  dependency.registerLazySingleton<UserService>(
    () => UserServiceRest(dependency<RestService>()),
  );

  // View models
  dependency.registerLazySingleton(
    () => LoginViewModel(dependency<UserService>()),
  );
  dependency.registerLazySingleton(
    () => TodoListViewModel(
      dependency<TodoService>(),
      dependency<LoginViewModel>(),
    ),
  );
}

import 'package:get_it/get_it.dart';

final dependency = GetIt.instance;

class RestService {
  RestService() {
    print('  RestService created');
  }
}

class Clock {
  Clock() {
    print('  Clock created');
  }
}

class Order {
  Order() {
    print('  Order created');
  }
}

void main() {
  print('1. register');
  dependency.registerSingleton(Clock()); // made now
  dependency.registerLazySingleton(() => RestService()); // made on first use
  dependency.registerFactory(() => Order()); // made on every use

  print('2. first use');
  final a = dependency<RestService>();
  dependency<Clock>();
  final o1 = dependency<Order>();

  print('3. second use');
  final b = dependency<RestService>();
  final o2 = dependency<Order>();

  print('same RestService? ${identical(a, b)}');
  print('same Order? ${identical(o1, o2)}');
}

import 'package:flutter/material.dart';

import 'app/dependencies.dart' as di;
import 'app/router.dart' as router;

void main() {
  di.init(); // fill the service locator before the first widget is built

  runApp(const TodoApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MVVM to-do',
      theme: ThemeData(colorSchemeSeed: Colors.green),
      initialRoute: router.login,
      routes: router.routes,
    );
  }
}

import 'package:flutter/widgets.dart';

import '../screens/login/login_view.dart';
import '../screens/todolist/todolist_view.dart';

const login = '/';
const todoList = '/todos';

final Map<String, WidgetBuilder> routes = {
  login: (_) => const LoginView(),
  todoList: (_) => const TodoListView(),
};

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

import 'app/dependencies.dart' as di;
import 'models/user.dart';
import 'services/user/user_service.dart';

// The lecture's first step: services come from get_it,
// app state still lives in providers above MaterialApp.
void main() {
  di.init();

  runApp(
    MultiProvider(
      providers: [
        FutureProvider<List<User>>(
          create: (_) => di.dependency<UserService>().getUserList(),
          initialData: const [], // required since provider 5
        ),
        ChangeNotifierProvider(create: (_) => ValueNotifier<User?>(null)),
      ],
      child: const MaterialApp(home: UserListScreen()),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final users = context.watch<List<User>>();
    return Scaffold(
      appBar: AppBar(title: const Text('Choose a user to log in as')),
      body: ListView(
        children: [for (final u in users) ListTile(title: Text(u.name))],
      ),
    );
  }
}

TodoService -> TodoServiceRest
UserService -> UserServiceRest
TodoServiceRest: Exception: GET todos?userId=1 failed: HTTP 400
login screen: Aram | Shilan | Karwan
Karwan: 0 to-dos
after +: New task

import 'package:get_it/get_it.dart';

final dependency = GetIt.instance;

abstract class TodoService {
  Future<List<String>> getTodoList(int userId);
}

class TodoServiceRest implements TodoService {
  @override
  Future<List<String>> getTodoList(int userId) async =>
      throw Exception('no server in this demo');
}

class TodoServiceMock implements TodoService {
  @override
  Future<List<String>> getTodoList(int userId) async =>
      ['Replace light bulb', 'Buy Flutter eBook'];
}

Future<void> main() async {
  dependency.registerLazySingleton<TodoService>(() => TodoServiceRest());
  print('registered: ${dependency<TodoService>().runtimeType}');

  try {
    dependency.registerLazySingleton<TodoService>(() => TodoServiceMock());
  } catch (e) {
    print('second registration: ${e.toString().split('\n').first}');
  }

  await dependency.reset(); // clears every registration (handy in tests)
  dependency.registerLazySingleton<TodoService>(() => TodoServiceMock());
  final service = dependency<TodoService>();
  print('registered: ${service.runtimeType}');
  print(await service.getTodoList(1));
}