Project: A To-Do App with Providersپڕۆژە: ئەپێکی ئەرکەکان بە providerـەکان

class User {
  const User({required this.id, required this.name, required this.email});

  final int id;
  final String name;
  final String email;
}

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 is immutable: toggling makes a changed copy.
  Todo copyWith({bool? completed}) => Todo(
        id: id,
        userId: userId,
        title: title,
        completed: completed ?? this.completed,
      );
}

import 'models.dart';

// The lecture's two collections as Dart lists.
// Neutral names, example.com addresses, no passwords, no photos.
const sampleUsers = [
  User(id: 1, name: 'Aram', email: 'aram@example.com'),
  User(id: 2, name: 'Shilan', email: 'shilan@example.com'),
  User(id: 3, name: 'Karwan', email: 'karwan@example.com'),
];

const sampleTodos = [
  Todo(id: 1, userId: 1, title: 'Prepare proposal for the new project'),
  Todo(id: 2, userId: 1, title: 'Replace light bulb'),
  Todo(id: 3, userId: 1, title: 'Buy Flutter eBook'),
  Todo(id: 4, userId: 1, title: 'Subscribe to fibre-optic internet'),
  Todo(id: 5, userId: 1, title: 'Set up online meeting room', completed: true),
  Todo(id: 6, userId: 2, title: 'New task'),
  Todo(id: 8, userId: 2, title: 'New task', completed: true),
];

import 'models.dart';
import 'sample_data.dart';

// Pretend servers: they answer after a short wait.
class UserDataService {
  Future<List<User>> getUserList() async {
    await Future<void>.delayed(const Duration(milliseconds: 500));
    return sampleUsers;
  }
}

class TodoDataService {
  final List<Todo> _todos = [...sampleTodos]; // a changeable copy

  Future<List<Todo>> getTodoList(int userId) async {
    await Future<void>.delayed(const Duration(milliseconds: 500));
    return _todos.where((t) => t.userId == userId).toList();
  }

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

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

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

import 'package:flutter/foundation.dart';

import 'models.dart';
import 'services.dart';

class TodoListNotifier extends ChangeNotifier {
  TodoListNotifier(this._service);

  final TodoDataService _service;
  User? _user;
  List<Todo> _todos = const [];
  bool _loading = false;

  List<Todo> get todos => _todos;
  bool get loading => _loading;

  // ChangeNotifierProxyProvider calls this whenever the current user changes.
  void setUser(User? user) {
    if (user?.id == _user?.id) return; // the same user: keep the list
    _user = user;
    _todos = const [];
    _loading = user != null;
    if (user != null) _load(user.id);
    notifyListeners();
  }

  Future<void> _load(int userId) async {
    final list = await _service.getTodoList(userId);
    if (_user?.id != userId) return; // another user logged in meanwhile
    _todos = list;
    _loading = false;
    notifyListeners();
  }

  Future<void> toggle(Todo todo) async {
    final changed = todo.copyWith(completed: !todo.completed);
    await _service.updateTodo(changed);
    _todos = [for (final t in _todos) t.id == todo.id ? changed : t];
    notifyListeners();
  }

  Future<void> delete(Todo todo) async {
    await _service.deleteTodo(todo.id);
    _todos = _todos.where((t) => t.id != todo.id).toList();
    notifyListeners();
  }

  Future<void> add(String title) async {
    final user = _user;
    if (user == null) return;
    final todo = await _service.addTodo(user.id, title);
    _todos = [..._todos, todo];
    notifyListeners();
  }
}

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

import 'login_as_screen.dart';
import 'models.dart';
import 'services.dart';
import 'todo_list_notifier.dart';

void main() => runApp(const TodoApp());

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

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        // The services (the lecture's "service locator")
        Provider<UserDataService>(create: (_) => UserDataService()),
        Provider<TodoDataService>(create: (_) => TodoDataService()),
        // 1. All users, loaded once
        FutureProvider<List<User>>(
          create: (context) => context.read<UserDataService>().getUserList(),
          initialData: const [],
        ),
        // 2. The current user (null = nobody logged in)
        ChangeNotifierProvider<ValueNotifier<User?>>(
          create: (_) => ValueNotifier<User?>(null),
        ),
        // 3. The current user's to-dos, kept in sync with 2
        ChangeNotifierProxyProvider<ValueNotifier<User?>, TodoListNotifier>(
          create: (context) => TodoListNotifier(context.read<TodoDataService>()),
          update: (context, currentUser, list) =>
              list!..setUser(currentUser.value),
        ),
      ],
      child: MaterialApp(
        title: 'To-do',
        theme: ThemeData(colorSchemeSeed: Colors.green),
        home: const LoginAsScreen(),
      ),
    );
  }
}

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

import 'models.dart';
import 'todo_list_screen.dart';

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

  @override
  Widget build(BuildContext context) {
    final users = context.watch<List<User>>(); // from the FutureProvider
    return Scaffold(
      appBar: AppBar(title: const Text('Choose a user to log in as')),
      body: users.isEmpty
          ? const Center(child: CircularProgressIndicator())
          : ListView(
              children: [
                for (final user in users)
                  ListTile(
                    leading: CircleAvatar(child: Text(user.name[0])),
                    title: Text(user.name),
                    subtitle: Text('user id: ${user.id}'),
                    onTap: () => _logInAs(context, user),
                  ),
              ],
            ),
    );
  }

  void _logInAs(BuildContext context, User user) {
    context.read<ValueNotifier<User?>>().value = user; // change the current user
    Navigator.of(context).push(
      MaterialPageRoute<void>(builder: (_) => const TodoListScreen()),
    );
  }
}

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

import 'models.dart';
import 'todo_list_notifier.dart';

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

  @override
  Widget build(BuildContext context) {
    final user = context.watch<ValueNotifier<User?>>().value; // for the app bar
    final list = context.watch<TodoListNotifier>(); // for the list
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            CircleAvatar(child: Text(user?.name[0] ?? '?')),
            const SizedBox(width: 12),
            Text(user?.name ?? ''),
          ],
        ),
        actions: [
          IconButton(
            tooltip: 'Log out',
            icon: const Icon(Icons.logout),
            onPressed: () {
              context.read<ValueNotifier<User?>>().value = null;
              Navigator.of(context).pop();
            },
          ),
        ],
      ),
      body: list.loading
          ? const Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: list.todos.length,
              itemBuilder: (context, i) {
                final todo = list.todos[i];
                return ListTile(
                  title: Text(
                    todo.title,
                    style: TextStyle(
                      decoration:
                          todo.completed ? TextDecoration.lineThrough : null,
                    ),
                  ),
                  subtitle: Text('id: ${todo.id}'),
                  onTap: () => context.read<TodoListNotifier>().toggle(todo),
                  onLongPress: () =>
                      context.read<TodoListNotifier>().delete(todo),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add a to-do',
        onPressed: () => context.read<TodoListNotifier>().add('New task'),
        child: const Icon(Icons.add),
      ),
    );
  }
}

1 start:        spinner=true
2 users loaded: Aram | Shilan | Karwan
3 tap Aram:     app bar shows Aram=true
4 his to-dos:   Prepare proposal for the new project | Replace light bulb | Buy Flutter eBook | Subscribe to fibre-optic internet | Set up online meeting room (done)
5 tap:          Prepare proposal for the new project | Replace light bulb (done) | Buy Flutter eBook | Subscribe to fibre-optic internet | Set up online meeting room (done)
6 long-press:   Prepare proposal for the new project | Replace light bulb (done) | Subscribe to fibre-optic internet | Set up online meeting room (done)
7 tap +:        Prepare proposal for the new project | Replace light bulb (done) | Subscribe to fibre-optic internet | Set up online meeting room (done) | New task (new id 9)
8 log out:      back on "Choose a user to log in as"
9 tap Shilan:   New task | New task (done)