Flutter Bloc: How to show data from 5, 10 apis on single page using bloc in flutter

I have a scenario like,

In my homePage my data will come from 5-10 apis, for different sections e.g(api1 , api2, api3 etc..) . I have 10 different apis and their response model,I need to show data from all api's in home page.

I have Created seperate blocs for all api's

From One api, I am showing data like that

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
  FirstApi firstApi = FirstApi();
  @override
  void initState() {
    firstApi.add(FirstApiEvent);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocBuilder<FirstApiBloc, FirstApiState>(
        bloc: firstApi,
        builder: ((context, state) {
          if (state is Success) {
            return Column(
              children: [
                Text(firstApi.firstApiModel.data.title),
                Text(firstApi.firstApiModel.data.description),
                Text(firstApi.firstApiModel.data.price),
                Text(firstApi.firstApiModel.data.Data),
              ],
            );
          } else {
            return const Text("Noting ");
          }
        }),
      ),
    );
  }
}

For Two Apis I am showing data like this

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  FirstApi firstApi = FirstApi();

  @override
  void initState() {
    firstApi.add(FirstApiEvent);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocBuilder<FirstApiBloc, FirstApiState>(
        bloc: firstApi,
        builder: ((context, state) {
          if (state is Success) {
            return BlocBuilder<SecondAPiBloc, SecondApiState>(
              builder: (context, secondApistate) {
                if(state is Success){
                return Column(
                  children: [
                    Text(firstApi.firstApiModel.data.title),
                    Text(firstApi.firstApiModel.data.description),
                    Text(firstApi.firstApiModel.data.price),
                    Text(firstApi.firstApiModel.data.Data),

                    if(secondstate is Succcess)
                     Text(secondApistate.secondAPiModel.data.title),
                     Text(secondApistate.secondAPiModel.data.description),
                  ],
                );
              },}
          else {
            return const Text("Noting ");
          }
            );
          }
        }),
      ),
    );
  }
}

My questions is

How I will show this data from all apis on my home page By using Bloc builders ? Should I use 10 nested bloc builders? Or is there any better way to do that

It would be much easier to suggest an architecture if you describe your data and page structure.

I will describe a scenario and maybe it gives you a good idea how you do the thing with your specific case.

Imagine 4 of the apis you are going to use, are providing table view data. So we need a widget for loading and showing a table of data. The rest of the apis are responsible required data for your surrounding widgets like header and footer. Therefore, we implement related widgets for these parts too.

The main point is that each widget contains its blocBuilder and a proper way of state handling.

At the end you will use these widgets inside your homepage (maybe) without any blocBuilders. When user opens the page, every sections shows a proper loader or placeholder shimmer effect till data fetches and replaces with a proper fade animation.

In some cases that your data from different apis are dependent, it make sense you use some nested blocBuilders.