Now I have 2 scrren Home and ListScreen, here is what I did:

file * home.dart*:

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return RepositoryProvider(
      create: (context) => GateInBloc(),
      child: const HomeWidget(),
    );
  }
class HomeWidget extends StatelessWidget {
  const HomeWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
            child: Column(
          children: [
            GestureDetector(
              onTap: () {
                var bloc = context.read<GateInBloc>();
                Navigator.of(context)
                    .pushNamed(MyPath.gatein, arguments: {'bloc': bloc});
              },
              child: const ItemCard(...),
            ),
            GestureDetector(
              child: const ItemCard(),
            ),
            GestureDetector(
              child: const ItemCard(),
            ),
          ],
        )));
  }
}

here is myRoute:

    case MyPath.gatein:
      var bloc =
          (settings.arguments as Map<String, dynamic>)['bloc'] as GateInBloc;
      return MaterialPageRoute(
        builder: (context) => BlocProvider.value(
          value: bloc,
          child: const ListGateInScreen(),
        ),
      );

then here in the ListScreen, Im not sure the way I use bloc is correct or not ?

class ListGateInScreen extends StatefulWidget {
  const ListGateInScreen({super.key});

  @override
  State<ListGateInScreen> createState() => _ListGateInScreenState();
}

class _ListGateInScreenState extends State<ListGateInScreen> {
  @override
  void initState() {
    context.read<GateInBloc>().add(FetchInitEvent());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final gateInBloc = context.read<GateInBloc>();
    return Scaffold(
        appBar: AppBar(actions: [
          BlocProvider.value(
            value: gateInBloc,
            child: IconButton(
              onPressed: () {
                showDialog(
                  context: context,
                  barrierDismissible: false, // user must tap button!
                  builder: (BuildContext context) {
                    return BlocProvider.value(
                      value: gateInBloc,
                      child: BlocBuilder<GateInBloc, GateInState>(
                        builder: (context, state) {
                          return DayPickerAleart();
                        },
                      ),
                    );
                  },
                );
              },
              icon: const Icon(Icons.search),
            ),
          )
        ]),
        body: BlocConsumer<GateInBloc, GateInState>(
          listener: (context, state) {},
          buildWhen: (pre, cur) => pre.statusState != cur.statusState,
          builder: (context, state) {
            switch (state.statusState) {
              case StatusState.loading:
                return const Center(
                  child: CircularProgressIndicator(),
                );
              case StatusState.error:
                return Center(
                  child: Text(state.error),
                );
              case StatusState.success:
                if (state.listGateIn.isEmpty) {
                  return const Center(
                    child: Text('Empty Data'),
                  );
                } else {
                  return MyListView(state: state);
                }
              default:
                return const SizedBox();
            }
          },
        ));
  }
}

So am I doing right ? Im mean I do pass the bloc by route then in here I declare it again by

final gateinBLoc= context.read<GateInBloc>(); 

and also using to add FetchInitial in initState like that ?
I try to add FetchInitial event from home but it going wrong