Flutter 错误：无法在 BlocBuilder Widget 上方找到正确的 Provider

Question

我在 Flutter 应用程序中遇到以下错误：

Error: Could not find the correct Provider<GetPostBloc> above this BlocBuilder<GetPostBloc, GetPostState> Widget
Error: Could not find the correct Provider<MyUserBloc> above this BlocBuilder<MyUserBloc, MyUserState> Widget

我提供了

GetPostBloc

、

MyUserBloc

的代码以及使用这些类的小部件。

GetPostBloc

代码：

class GetPostBloc extends Bloc<GetPostEvent, GetPostState> {
  PostRepository _postRepository;

  GetPostBloc({
    required PostRepository postRepository
  }) : _postRepository = postRepository,
        super(GetPostInitial()) {
    on<GetPosts>((event, emit) async {
      emit(GetPostLoading());
      try {
        List<Post> posts = await _postRepository.getPost();
        emit(GetPostSuccess(posts));
      } catch (e) {
        emit(GetPostFailure());
      }
    });
  }
}

MyUserBloc

代码：

class MyUserBloc extends Bloc<MyUserEvent, MyUserState> {
  final UserRepository _userRepository;

  MyUserBloc({
    required UserRepository myUserRepository
  }) : _userRepository = myUserRepository,
        super(const MyUserState.loading()) {
    on<GetMyUser>((event, emit) async {
      try {
        MyUser myUser = await _userRepository.getMyUser(event.myUserId);
        emit(MyUserState.success(myUser));
      } catch (e) {
        log(e.toString());
        emit(const MyUserState.failure());
      }
    });
  }
}

在另一个文件中，我有一个

ElevatedButton

导航到

HomeScreen

:

ElevatedButton(
  onPressed: () {
    // Navigate to Login
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const MaterialApp(
          home: HomeScreen(),
      )
      ),
    );
  },
)

这是使用

HomeScreen

和

GetPostBloc

的

MyUserBloc

小部件：

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       backgroundColor: Theme.of(context).colorScheme.background,
        floatingActionButton: BlocBuilder<MyUserBloc, MyUserState>(
          builder: (context, state) {
            if(state.status == MyUserStatus.success) {
              return FloatingActionButton(
                onPressed: () {
      // ...
      body: BlocBuilder<GetPostBloc, GetPostState>(
        builder: (context, state) {
        if(state is GetPostSuccess) {
              return ListView.builder(
                  itemCount: state.posts.length,
          // ...
        },
      ),
    );
  }
}

我尝试用相应的

Scaffold

小部件包装

BlocProvider

，但错误仍然存在。我还遵循了其他建议的解决方案，但到目前为止没有一个有效。

任何解决此错误的帮助或建议将不胜感激。

谢谢！

我尝试通过将

Scaffold

小部件包装在我的

HomeScreen

中，并使用

BlocProvider

和

GetPostBloc

各自的

MyUserBloc

小部件来解决该错误。我希望这能为

BlocBuilder

小部件提供必要的上下文，以访问相应的块并检索所需的数据。

但是，错误依然存在，无法得到想要的结果。我还尝试遵循各种资源中提出的其他解决方案，但它们都不适合我的具体案例。

Answer 1

您遇到的错误消息表明

BlocBuilder

小部件无法在小部件树中找到其各自的 Provider 对象。当

BlocProvider

未正确包装正在使用 BlocBuilder 的小部件树时，通常会发生这种情况。

要解决此问题，请确保您已使用适当的

BlocProvider

来封装

GetPostBloc

和

MyUserBloc

的小部件树。

示例代码如下。

@override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider<GetPostBloc>(
          create: (context) => GetPostBloc(),
        ),
        BlocProvider<MyUserBloc>(
          create: (context) => MyUserBloc(),
        ),
      ],
      child: Scaffold(
        backgroundColor: Theme.of(context).colorScheme.background,
        floatingActionButton: BlocBuilder<MyUserBloc, MyUserState>(
          builder: (context, state) {
            if (state.status == MyUserStatus.success) {
              return FloatingActionButton(
                onPressed: () {
                  // Your onPressed code
                },
              );
            }
            return Container(); // Return an empty container if the state is not success
          },
        ),
        body: BlocBuilder<GetPostBloc, GetPostState>(
          builder: (context, state) {
            if (state is GetPostSuccess) {
              return ListView.builder(
                itemCount: state.posts.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(state.posts[index].title),
                    // Your ListTile code
                  );
                },
              );
            }
            return Center(child: CircularProgressIndicator()); // Loading state
          },
        ),
      ),
    );
  }