我如何使 bloc 可用于所有 flutter 应用程序页面

Question

I am using bloc to manage my app state, I want to provide the bloc for all my app pages so I have inserted in the top of the widget tree so I can use it from any place in the widget tree, I have used it as the follows

1- main page

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }}

  class MyAppState extends State<MyApp>{

  @override
  Widget build(BuildContext context) {
    return BlocProvider<MyBloc>(
      create: (BuildContext context) {
        return MyBloc();
      },
      child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: secondPage()),
    );
  }
}

2- secondPage:

 class SecondPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SecondPage State();
  }
}

class SecondPage State extends State<SecondPage > {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('secondPage')),

        body: BlocBuilder<CityBloc, CityState>(
          builder: (BuildContext context, CityState state) {            
             .......  
          },));}}

but the flutter display an error that

BlocProvider.of() called with a context that does not contain a Bloc of type MyBloc

and this is a screenshot of the app's widgets tree

, what is the error, I want to provide mybloc for all widgets

note: the app run ok if I write the MainPage class and the secondPage class in the same page, but when I separate them the error appears

Answer 1

I was shocked by the solution, the problem was only in import, I have replaced

import '../blocs/blocs.dart';

With

import 'package: loony_trips / blocs / blocs.dart';

And everything was fixed, even though the two sentences were supposed to be the same