ProxyProvider and ChangeNotifierProxyProviderProxyProvider و ChangeNotifierProxyProvider

// The lecture's to-do model and data service, shared by this lesson's examples.
class Todo {
  const Todo({required this.id, required this.title, this.completed = false});

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

class TodoDataService {
  // One answer, later: the list arrives after a short wait, like from a server.
  Future<List<Todo>> getTodoList() async {
    await Future<void>.delayed(const Duration(seconds: 1));
    return const [
      Todo(id: 1, title: 'Prepare proposal for the new project'),
      Todo(id: 2, title: 'Replace light bulb'),
      Todo(id: 3, title: 'Buy Flutter eBook'),
      Todo(id: 4, title: 'Subscribe to fibre-optic internet'),
      Todo(id: 5, title: 'Set up online meeting room', completed: true),
    ];
  }
}

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

import 'todo_data.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        // The source: the to-do list from the data service.
        FutureProvider<List<Todo>>(
          create: (_) => TodoDataService().getTodoList(),
          initialData: const [],
        ),
        // A value that depends on the source: the number of to-dos.
        ProxyProvider<List<Todo>, int>(
          update: (context, todos, previous) => todos.length,
        ),
      ],
      child: const MaterialApp(home: TodoListScreen()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final todos = context.watch<List<Todo>>(); // get the to-do list
    final count = context.watch<int>(); // get the count
    return Scaffold(
      appBar: AppBar(
        title: const Text('My To-Do List (ProxyProvider)'),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: Badge.count(count: count, child: const Icon(Icons.checklist)),
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, i) => ListTile(title: Text(todos[i].title)),
      ),
    );
  }
}

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

import 'todo_data.dart';

// The list now lives in a ChangeNotifier, so it can grow.
class TodoListNotifier extends ChangeNotifier {
  final List<Todo> _todos = [
    const Todo(id: 1, title: 'Prepare proposal for the new project'),
    const Todo(id: 2, title: 'Replace light bulb'),
    const Todo(id: 3, title: 'Buy Flutter eBook'),
    const Todo(id: 4, title: 'Subscribe to fibre-optic internet'),
    const Todo(id: 5, title: 'Set up online meeting room'),
  ];

  List<Todo> get todos => List.unmodifiable(_todos);

  void add(String title) {
    _todos.add(Todo(id: _todos.length + 1, title: title));
    notifyListeners(); // the ProxyProvider hears this and runs update again
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => TodoListNotifier()),
        ProxyProvider<TodoListNotifier, int>(
          update: (context, list, previous) => list.todos.length,
        ),
      ],
      child: const MaterialApp(home: TodoListScreen()),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final todos = context.watch<TodoListNotifier>().todos;
    return Scaffold(
      appBar: AppBar(
        title: const Text('My To-Do List'),
        actions: const [CountBadge()],
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, i) => ListTile(title: Text(todos[i].title)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<TodoListNotifier>().add('New task'),
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final count = context.watch<int>(); // only the derived value
    return Padding(
      padding: const EdgeInsets.only(right: 16),
      child: Badge.count(count: count, child: const Icon(Icons.checklist)),
    );
  }
}

start:              update ran 1 time(s), badge built 1 time(s)
notify, same count: update ran 2 time(s), badge built 1 time(s)
notify, count 6:    update ran 3 time(s), badge built 2 time(s)

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

import 'live_count.dart' show TodoListNotifier;

class User {
  const User(this.name);

  final String name;
}

// Built from TWO other providers, so it is a ProxyProvider2.
class TodoSummary {
  const TodoSummary(this.userName, this.count);

  final String userName;
  final int count;

  String get text => '$userName has $count to-dos';
}

Widget buildApp() {
  return MultiProvider(
    providers: [
      Provider<User>(create: (_) => const User('Aram')),
      ChangeNotifierProvider(create: (_) => TodoListNotifier()),
      ProxyProvider2<User, TodoListNotifier, TodoSummary>(
        update: (context, user, list, previous) =>
            TodoSummary(user.name, list.todos.length),
      ),
    ],
    child: const MaterialApp(home: SummaryScreen()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final summary = context.watch<TodoSummary>();
    return Scaffold(
      appBar: AppBar(title: Text(summary.text)),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<TodoListNotifier>().add('New task'),
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

// The course's example, completed so that it runs.
class AuthService {
  String token = 'some_auth_token';
}

class UserProfile {
  UserProfile(this.authService);

  final AuthService authService;
}

Widget buildApp() {
  return MultiProvider(
    providers: [
      Provider<AuthService>(create: (context) => AuthService()),
      ProxyProvider<AuthService, UserProfile>(
        update: (context, auth, previousUser) => UserProfile(auth),
      ),
    ],
    child: const MaterialApp(home: ProfileScreen()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final profile = context.watch<UserProfile>();
    return Scaffold(
      body: Center(child: Text('Token: ${profile.authService.token}')),
    );
  }
}

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

// AuthService can now change (sign in), so it is a ChangeNotifier.
class AuthService extends ChangeNotifier {
  String _token = 'token-A';
  String get token => _token;

  void signIn(String newToken) {
    _token = newToken;
    notifyListeners();
  }
}

// A plain class that only combines values: a ProxyProvider builds it.
class UserProfile {
  const UserProfile(this.token);

  final String token;

  String get title => 'Profile for $token';
}

Widget buildApp() {
  return MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (_) => AuthService()),
      ProxyProvider<AuthService, UserProfile>(
        update: (context, auth, previous) => UserProfile(auth.token),
      ),
    ],
    child: const MaterialApp(home: ProfileScreen()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final profile = context.watch<UserProfile>();
    return Scaffold(
      appBar: AppBar(title: Text(profile.title)),
      body: Center(
        child: FilledButton(
          onPressed: () => context.read<AuthService>().signIn('token-B'),
          child: const Text('Sign in as another user'),
        ),
      ),
    );
  }
}

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

import 'auth_course.dart' show AuthService;

// The course's ChangeNotifierProxyProvider example, as written in the notes.
class UserProfileNotifier extends ChangeNotifier {
  final AuthService authService;
  String userData = 'Loading...';

  UserProfileNotifier(this.authService) {
    fetchUserData();
  }

  void fetchUserData() {
    userData = 'User Data for ${authService.token}';
    notifyListeners();
  }
}

Widget buildApp() {
  return MultiProvider(
    providers: [
      Provider(create: (context) => AuthService()),
      ChangeNotifierProxyProvider<AuthService, UserProfileNotifier>(
        create: (context) => UserProfileNotifier(context.read<AuthService>()),
        update: (context, auth, previous) =>
            previous!..fetchUserData(), // the new `auth` is never used
      ),
    ],
    child: const MaterialApp(home: Scaffold()),
  );
}

token-A  notes:  User Data for token-A
token-A  fixed:  User data for token-A
token-B  notes:  User Data for token-A
token-B  fixed:  User data for token-B

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

import 'auth_changes.dart' show AuthService;

class UserProfileNotifier extends ChangeNotifier {
  String? _token;
  String _userData = 'Loading...';

  String get userData => _userData;

  // ChangeNotifierProxyProvider calls this every time AuthService changes.
  void updateAuth(AuthService auth) {
    if (auth.token == _token) return; // nothing new: keep the data
    _token = auth.token;
    _fetchUserData(auth.token);
  }

  Future<void> _fetchUserData(String token) async {
    await Future<void>.delayed(const Duration(milliseconds: 300)); // a server
    if (token != _token) return; // the user changed while we waited
    _userData = 'User data for $token';
    notifyListeners();
  }
}

Widget buildApp() {
  return MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (_) => AuthService()),
      ChangeNotifierProxyProvider<AuthService, UserProfileNotifier>(
        create: (_) => UserProfileNotifier(), // made once
        update: (_, auth, notifier) => notifier!..updateAuth(auth), // kept
      ),
    ],
    child: const MaterialApp(home: ProfileScreen()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final data = context.watch<UserProfileNotifier>().userData;
    return Scaffold(
      appBar: AppBar(title: Text(data)),
      body: Center(
        child: FilledButton(
          onPressed: () => context.read<AuthService>().signIn('token-B'),
          child: const Text('Sign in as another user'),
        ),
      ),
    );
  }
}

import 'package:provider/provider.dart';

import 'auth_changes.dart' show AuthService;
import 'profile_fixed.dart' show UserProfileNotifier;

// DON'T: a new notifier on every update loses its state and listeners.
final wrong = ChangeNotifierProxyProvider<AuthService, UserProfileNotifier>(
  create: (_) => UserProfileNotifier(),
  update: (_, auth, previous) => UserProfileNotifier()..updateAuth(auth),
);

// DO: keep the previous notifier and pass the new value into it.
final right = ChangeNotifierProxyProvider<AuthService, UserProfileNotifier>(
  create: (_) => UserProfileNotifier(),
  update: (_, auth, previous) => previous!..updateAuth(auth),
);