bloc.dart

/// The main screen launched with Navigator.push(...)

/// the question is where do I load the data of the EmailPage, without making it a StatefulWidget?
/// I guess we can solve that by adding a callback on the BlocBuilder widget.
class RegistrationFlow extends StatelessWidget {
  const RegistrationFlow({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        Provider(create: (_) =>  UsernameBloc()),
        Provider(create: (_) =>  EmailBloc()),
      ],
      child: Scaffold(
        body: PageView(
          children: [
            UsernamePage(),
            EmailPage(),
            // More pages...
          ],
        ),
      ),
    );
  }
}

class UsernamePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<UsernameBloc, UsernameState>(
      builder: (context, state) {
        return Container();
      },
    );
  }
}

class EmailPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<EmailBloc, EmailState>(
      builder: (context, state) {
        return Container();
      },
    );
  }
}

I would highly recommend restructuring to provide the blocs as low as possible in the widget tree. Then you can decompose your widgets into the "page" and the "view" where the page is responsible for providing the dependencies and the view is responsible for consuming the dependencies. Then you can add an event like EmailRequested when the bloc is created without needing a StatefulWidget.

class RegistrationFlow extends StatelessWidget {
  const RegistrationFlow({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [
          UsernamePage(),
          EmailPage(),
          // More pages...
        ],
      ),
    );
  }
}

class UsernamePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return BlocProvider(
     create: (context) => UsernameBloc(),
     child: UsernameView(),
   );
  }
}

class UsernameView extends StatelessWidget {
  const UsernameView({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<UsernameBloc, UsernameState>(
      builder: (context, state) {
        return Container();
      },
    );
  }
}

class EmailPage extends StatelessWidget {
  const EmailPage({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
     create: (context) => EmailBloc()..add(EmailRequested()),
     child: EmailView(),
   );
  }
}

class EmailView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<EmailBloc, EmailState>(
      builder: (context, state) {
        return Container();
      },
    );
  }
}

Hope that helps 👍

Thanks for checking out. I forgot to mention that, once the flow is complete, I would need to get everything for each "Page" bloc/state and send it to the server from the RegistrationFlow widget (which has a eventual "RegistrationBloc").

With your suggestion above I won't be able to get the inner Blocs to retrieve its data. Please let me know if there I still a better way to do that :)

Thank you