How to lazy load data and make it valid throughout the entire lifecycle of the page

[greyfreedom]

I have a provider with parameters（such as 1,2,3）.
The page has three buttons, and when you click the first button, ref.watch(myProvider(1)) is called, and when you click the second button, ref.watch(myProvider(2)) is called. But when invoke ref.watch(myProvider(2)), the myProvider with param 1 is disposed.

[greyfreedom]

The effect I want is:
when the first button is clicked, ref.watch(myProvider(1)) invoke and myProvider(1) load data.
when the second button is clicked, ref.watch(myProvider(2)) invoke and myProvider(2) load data and myProvider(1) not disposed.
when exist the page, myProvider(1) and myProvider(2) disposed.

[YiannisBourkelis]

Give us some example code using dartpad to help you further. From my understanding you are using a family provider. Using ref.watch it will load the data once and keep it cached for the entire lifecycle of your application, or until you call invalidate. Provider state is cleared when you exit the page, if it is configured as autodisposable.

[greyfreedom]

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

part 'demo.g.dart';

/// fake request types
@riverpod
Future<List<int>> demoTypes(Ref ref) async {
  // request api
  return [1, 2];
}

/// fake request content base on specific type
@riverpod
Future<String> demoContent(Ref ref, int type) async {
  ref.onDispose(() {
    logger.i('demoContentProvider $type #disposed...');
  });
  logger.i('demoContentProvider $type #build...');
  await Future.delayed(Duration(seconds: 2));
  return Future.value("content of type $type");
}

class DemoWidget extends ConsumerStatefulWidget {
  const DemoWidget({super.key});

  @override
  ConsumerState createState() => _DemoWidgetState();
}

class _DemoWidgetState extends ConsumerState<DemoWidget> {
  int? selectedType;

  @override
  Widget build(BuildContext context) {
    /// When entering the page, I want to wait for demoTypesProvider to obtain data and select the first value by default
    ref.listen<AsyncValue<List<int>>>(demoTypesProvider, (prev, next) {
      next.whenData((data) {
        if (data.isNotEmpty) {
          if (mounted) {
            setState(() {
              selectedType = data.first;
            });
          }
        }
      });
    });

    /// Monitor the value of demoTypesProvider and generate a button list based on its value
    var demoTypes = ref.watch(demoTypesProvider);
    return demoTypes.when(
      loading: () => const Center(child: CircularProgressIndicator()),
      error: (error, stack) => Container(color: Colors.red),
      data: (value) {
        if (value.isEmpty) {
          return Center(child: Text("Empty!!!"));
        } else {
          return Column(
            children: [
              /// label buttons
              Builder(builder: (context) {
                var labels = value.asMap().entries.map((item) {
                  return Padding(
                    padding: EdgeInsets.only(left: item.key > 0 ? 8 : 0),
                    child: GestureDetector(
                      onTap: () {
                        if (item.value != selectedType) {
                          setState(() {
                            selectedType = item.value;
                          });
                        }
                      },
                      child: Container(
                        color: item.value == selectedType ? Colors.red : Colors.transparent,
                        child: Text('type:${item.value}'),
                      ),
                    ),
                  );
                });
                return Row(
                  children: [...labels],
                );
              }),

              /// content base on selectedType
              /// I want：
              /// When the selected Type value is 1, demoContentProvider only retrieves content of type 1.
              /// When the selected Type value is 2, demoContentProvider only retrieves content of type 2 but retains content of type 1.
              /// This way, when I switch to type 1, the page does not need to perform loading.
              /// When exiting the DemoWidget page, all demoContentProviders are destroyed
              DemoContentWidget(type: selectedType ?? value.first),
            ],
          );
        }
      },
    );
  }
}

class DemoContentWidget extends ConsumerWidget {
  const DemoContentWidget({super.key, required this.type});

  final int type;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var content = ref.watch(demoContentProvider(type));
    return content.when(
      data: (value) {
        return Container(
          width: 100,
          height: 100,
          color: Colors.green.withOpacity(0.3),
          alignment: Alignment.center,
          child: Text(value),
        );
      },
      error: (e, s) => Container(),
      loading: () => Container(),
    );
  }
}

[greyfreedom]

Now, the log is:
// enter page
demoContentProvider 1 #build...

// click type2
demoContentProvider 2 #build...
demoContentProvider 1 #disposed...

// click type1
demoContentProvider 1 #build...
demoContentProvider 2 #disposed...

// exist page
demoContentProvider 1 #disposed...

But I want:
// enter page
demoContentProvider 1 #build...

// click type2
demoContentProvider 2 #build...

// click type1
nothing

// exist page
demoContentProvider 1 #disposed...
demoContentProvider 2 #disposed...

[YiannisBourkelis]

If you have not find a solution yet, upload a complete listing of your code so that I can run it locally and help you on troubleshooting this

[greyfreedom]

The above code is a complete demo, you can try to implement the log output I want

[zhxst]

Riverpod is always lazy load.
If you want to keep provider alive until app exit, use @Riverpod(keepAlive: true).

Another option is find a page last long enough and watch/listen the provider there. As long as the page(widget) live, your provider will live.

[gdurandrexel]

You probably need caching mechanism that demoContent would use load/store its data. You'll have to implement the solution yourself. I don't think riverpod can help here.

A simple solution is to use a global variable final _cache = <int, String>{} that is cleared in _DemoWidgetState.dispose().
Then demoContent can use it like this:

@riverpod
Future<String> demoContent(Ref ref, int type) async {
  var content = _cache[type];

  if (content == null) {
    await Future.delayed(Duration(seconds: 2));
    content = Future.value("content of type $type");
    _cache[type] = content;
  }

  return content;
}

This is valid only if demoContent is used only by DemoWidget since the cache is tied to the lifecycle of the widget.

[greyfreedom]

This method can indeed achieve data non duplicate requests, but every time the provider rebuilds, it will change from the loading state to the complete state, causing the loading UI to briefly appear and disappear