I'm trying to implement the following code using rivepod. It will display each elements in modules list one by one and after showing all modules it will display All modules loaded.

final List<String> modules = ["Module A", "Module B"];

StreamBuilder<List<String>>(
  stream: getModules(modules),
  builder: (context, snapshot) {
    final modules = snapshot.data ?? [];
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        for (var i = 0; i < modules.length; i++) ...[
          Row(
            children: [
              Container(
                width: 8,
                height: 8,
                decoration: ShapeDecoration(
                  shape: CircleBorder(),
                  color: primary,
                ),
              ),
              SizedBox(width: 4),
              LeftToRightTextFade(text: modules[i]),
            ],
          ),
          SizedBox(height: 8),
        ],
        if (snapshot.connectionState ==
            ConnectionState.done) ...[
          SizedBox(height: 16),
          FutureBuilder(
              future: Future.delayed(
                  Duration(milliseconds: 500)),
              builder: (context, snapshot) {
                if (snapshot.connectionState ==
                    ConnectionState.done) {
                  return Text(
                    "All modules loaded...",
                    style: body(context)
                        .copyWith(color: primary),
                  );
                }
                return SizedBox.shrink();
              }),
        ]
      ],
    );
  },
),

getModules function

Stream<List<String>> getModules(List<String> modules) async* {
  final showingModules = <String>[];

  for (var i = 0; i < modules.length; i++) {
    await Future.delayed(const Duration(milliseconds: 1500));
    showingModules.add(modules[i]);
    yield showingModules;
  }
}

I did it like this

Created a StreamProvider for modules

@riverpod
Stream<List<String>> getModules(Ref ref, List<String> modules) async* {
  final showingModules = <String>[];

  for (var i = 0; i < modules.length; i++) {
    await Future.delayed(const Duration(milliseconds: 1500));
    showingModules.add(modules[i]);
    yield showingModules;
  }
}

Changed Widget for showing modules

 Consumer(
  builder: (context, ref, child) {
    final loadedModules =
        ref.watch(getModulesProvider(modules));
    return switch (loadedModules) {
      AsyncData(:final value) => Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            for (var i = 0; i < value.length; i++) ...[
              LeftToRightTextFade(text: modules[i]),
              SizedBox(height: 8),
              // Is there any way to know the stream is done?
              // if (loadedModules.isDone) ...[
              //   SizedBox(height: 16),
              //   FutureBuilder(
              //       future: Future.delayed(
              //           Duration(milliseconds: 500)),
              //       builder: (context, snapshot) {
              //         if (snapshot.connectionState ==
              //             ConnectionState.done) {
              //           return Text(
              //             "All modules loaded...",
              //             style: body(context)
              //                 .copyWith(color: primary),
              //           );
              //         }
              //         return SizedBox.shrink();
              //       }),
              // ]
            ],
          ],
        ),
      _ => SizedBox.shrink(),
    };
  },
),

I don't know if i'm doing it right... Thanks in advance.