Find a way to update state in asyncNotifier while on stack screens

[potikorn]

*I already search similar discussion I found some. but not entriely work as I expected. I saw ProviderObserver too. but have no clue especially family modifier.

I need to know. Is there a way to update asyncNotifier while on another screen?
For example:

first provider on list screen

final mailFeedListController =
    AutoDisposeAsyncNotifierProvider<MailFeedListController, MailListState>(
  MailFeedListController.new,
  dependencies: [mailTypeNotifier], // not important.
);

class MailFeedListController extends AutoDisposeAsyncNotifier<MailListState> {
  @override
  FutureOr<MailListState> build() async {
    // fetch mail via repository provider
    return MailListState(mails: await extractedMails()); // should return list as async data
  }
}

second provider on detail screen

final mailPreviewController = AsyncNotifierProvider.autoDispose
    .family<MailPreviewController, MailPreviewState, String>(
  MailPreviewController.new,
);

class MailPreviewController
    extends AutoDisposeFamilyAsyncNotifier<MailPreviewState, String> {
  @override
  FutureOr<MailPreviewState> build(String arg) async {
    ...fetch api for get mail by id like ref.watch(mailRepository)
  }

  void toggleNeedMoreInfo() {
    final mailRepository = ref.watch(mailRepositoryProvider);
    final stateUpdate = state.requireValue.mail.copyWith(
      needInfo: !(state.valueOrNull?.mail.needInfo ?? false),
    );
    mailRepository.updateMail(stateUpdate).ignore();
    state = AsyncData(state.requireValue.copyWith(mail: stateUpdate));
    // Here is the point that I want to mutate first asyncNotifier (list)
    // I tried ref.read(mailFeedListController.notifier).fooFunc() isn't work. When I go back the list isn't update.
  }

Please advise. Thanks in advance 🙏

[moxiaov587]

What happened in ref.read(mailFeedListController.notifier).fooFunc()?

[potikorn]

@moxiaov587 nothing change.

I have two screen first is list screen (mailFeedListController) and second is detail screen (mailPreviewController) which tap from item in the list to push detail screen. My Intension is I need to update mailFeedListController while user in detail screen and when user go back something must change on first screen for example: if I tap favorite icon on detail screen item on list screen must enabled thai icon state too. Is this possible if I implement this way?

[moxiaov587]

Of course, if your update does not take effect, I think the problem should be in fooFunc().

[potikorn]

OK fooFunc() I updated state something like this:

  void fooFunc() {
    state = AsyncData(
      state.requiredValue.copyWith(
        mails:  state.requiredValue.map() // map equal id to new value
      )
    )
  }

I also try to invalidateSelf too but is not work.

  void fooFunc() {
    ref.invalidateSelf();
  }

Sorry for incomplete code. But It does simple like this. I'll try to implement again

[potikorn]

@moxiaov587 I have an update. I need to invalidate FutureProvider which fetches data from the API. It reload whole mail list like refresh the list. But my intention is should update only item that changes. By using copyWith mails state.

void fooFunc(MailDto updatedMail) {
    // of course this work. cause it's fetches from the API.
    // ref.invalidate(asyncMailListProvider);
    // ref.invalidate(mailTypeNotifier);
    // ref.invalidateSelf();

    // I need this appoarch to be retain srcoll position and save internet connection data (update locally)
    if (state.hasValue) {
      state = AsyncData(
      state.requiredValue.copyWith(
        mails:  state.requiredValue.map() // map equal id to new value
      )
    )
    }
  }

[moxiaov587]

I write a sample and it works for me.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.freezed.dart';
part 'main.g.dart';

@freezed
class MailDto with _$MailDto {
  const factory MailDto({
    required int index,
    @Default(false) bool selected,
  }) = _MailDto;

  factory MailDto.fromJson(Map<String, dynamic> json) =>
      _$MailDtoFromJson(json);
}

@Riverpod(dependencies: [])
class A extends _$A {
  @override
  Future<List<MailDto>> build() {
    return Future.value(List.generate(10, (index) => MailDto(index: index)));
  }

  void onSelect(int index) {
    state = state.whenData((list) {
      list[index] = list[index].copyWith(selected: true);
      return list;
    });
  }
}

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Consumer(
                builder: (context, ref, child) {
                  final list = ref.watch(aProvider).valueOrNull;

                  if (list?.isNotEmpty ?? false) {
                    return ListView.builder(
                      itemBuilder: (_, index) => ListTile(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (_) {
                                return Scaffold(
                                  appBar: AppBar(
                                    title: Text('Details'),
                                  ),
                                  body: Consumer(
                                    builder: (context, ref, child) {
                                      return TextButton(
                                        onPressed: () {
                                          ref
                                              .read(aProvider.notifier)
                                              .onSelect(index);
                                        },
                                        child: Text('selected'),
                                      );
                                    },
                                  ),
                                );
                              },
                            ),
                          );
                        },
                        selected: list[index].selected,
                        title: Text(
                          list[index].index.toString(),
                        ),
                      ),
                      itemCount: list!.length,
                    );
                  }

                  return Text('Empty');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}