Error: Could not find the correct Provider<NavBloc> above this BlocBuilder<NavBloc, NavState> Widget

Question

Now I am using bloc as my flutter state manager,I define the bloc state manage file follow the docs. When I am using the bloc like this:

import 'package:acientbay/src/bloc/nav/nav_bloc.dart';
import 'package:acientbay/src/page/home/home_list.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class HomeNav extends HookWidget{

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<NavBloc, NavState>(
      buildWhen: (previous, current) => previous.username != current.username,
      builder: (context, state) {
        return Scaffold(
          body: HomeList(),
          bottomNavigationBar: BottomNavigationBar(
              items:[
                BottomNavigationBarItem(icon: Icon(Icons.home), label: '作品库'),
                BottomNavigationBarItem(icon: Icon(Icons.school), label: '我的')
              ],
              currentIndex:state.selectNavIndex
          ),
        );
      },
    );
  }
}

shows error:

Performing hot restart...
Syncing files to device sdk gphone x86 arm...
Restarted application in 952ms.

======== Exception caught by widgets library =======================================================
The following ProviderNotFoundException was thrown building HomeNav:
Error: Could not find the correct Provider<NavBloc> above this BlocBuilder<NavBloc, NavState> Widget

This happens because you used a `BuildContext` that does not include the provider
of your choice. There are a few common scenarios:

- You added a new provider in your `main.dart` and performed a hot-reload.
  To fix, perform a hot-restart.

- The provider you are trying to read is in a different route.

  Providers are "scoped". So if you insert of provider inside a route, then
  other routes will not be able to access that provider.

- You used a `BuildContext` that is an ancestor of the provider you are trying to read.

  Make sure that BlocBuilder<NavBloc, NavState> is under your MultiProvider/Provider<NavBloc>.
  This usually happens when you are creating a provider and trying to read it immediately.

  For example, instead of:

  ```
  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // Will throw a ProviderNotFoundError, because `context` is associated
      // to the widget that is the parent of `Provider<Example>`
      child: Text(context.watch<Example>()),
    ),
  }
  ```

  consider using `builder` like so:

  ```
  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // we use `builder` to obtain a new `BuildContext` that has access to the provider
      builder: (context) {
        // No longer throws
        return Text(context.watch<Example>()),
      }
    ),
  }
  ```

If none of these solutions work, consider asking for help on StackOverflow:
https://stackoverflow.com/questions/tagged/flutter

The relevant error-causing widget was: 
  HomeNav file:///home/dolphin/Documents/GitHub/acientbay/lib/src/app/acientbay_app.dart:12:12
When the exception was thrown, this was the stack: 
#0      Provider._inheritedElementOf (package:provider/src/provider.dart:332:7)
#1      Provider.of (package:provider/src/provider.dart:284:30)
#2      ReadContext.read (package:provider/src/provider.dart:610:21)
#3      _BlocBuilderBaseState.initState (package:flutter_bloc/src/bloc_builder.dart:130:36)
#4      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4711:57)
...
====================================================================================================

======== Exception caught by widgets library =======================================================
The following ProviderNotFoundException was thrown building HomeNav:
Error: Could not find the correct Provider<NavBloc> above this BlocBuilder<NavBloc, NavState> Widget

This happens because you used a `BuildContext` that does not include the provider
of your choice. There are a few common scenarios:

- You added a new provider in your `main.dart` and performed a hot-reload.
  To fix, perform a hot-restart.

- The provider you are trying to read is in a different route.

  Providers are "scoped". So if you insert of provider inside a route, then
  other routes will not be able to access that provider.

- You used a `BuildContext` that is an ancestor of the provider you are trying to read.

  Make sure that BlocBuilder<NavBloc, NavState> is under your MultiProvider/Provider<NavBloc>.
  This usually happens when you are creating a provider and trying to read it immediately.

  For example, instead of:

  ```
  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // Will throw a ProviderNotFoundError, because `context` is associated
      // to the widget that is the parent of `Provider<Example>`
      child: Text(context.watch<Example>()),
    ),
  }
  ```

  consider using `builder` like so:

  ```
  Widget build(BuildContext context) {
    return Provider<Example>(
      create: (_) => Example(),
      // we use `builder` to obtain a new `BuildContext` that has access to the provider
      builder: (context) {
        // No longer throws
        return Text(context.watch<Example>()),
      }
    ),
  }
  ```

If none of these solutions work, consider asking for help on StackOverflow:
https://stackoverflow.com/questions/tagged/flutter

The relevant error-causing widget was: 
  HomeNav file:///home/dolphin/Documents/GitHub/acientbay/lib/src/app/acientbay_app.dart:12:12
When the exception was thrown, this was the stack: 
#0      Provider._inheritedElementOf (package:provider/src/provider.dart:332:7)
#1      Provider.of (package:provider/src/provider.dart:284:30)
#2      ReadContext.read (package:provider/src/provider.dart:610:21)
#3      _BlocBuilderBaseState.initState (package:flutter_bloc/src/bloc_builder.dart:130:36)
#4      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4711:57)
...
====================================================================================================

where is going wrong and what should I do to fix it?

Answer 1

Have you initialised your NavBloc above the widget where you are using it.

If not then maybe you can initialise it like this:

 Scaffold(
  body: BlocProvider(
      create: (context) => NavBloc(),
      child: ...(), // Your class goes here
    ),
  )

Answer 2

Simply create an instance of class NavBloc in your HomeNav class and pass it to the blocbuilder's bloc parameter.

Solution:

class HomeNav extends HookWidget{

  @override
  Widget build(BuildContext context) {
    final navBloc = NavBloc(); // creating an instance of the bloc class

    return BlocBuilder<NavBloc, NavState>(
      bloc: navBloc, // passing it here
      buildWhen: (previous, current) => previous.username != current.username,
      builder: (context, state) {
        return Scaffold(
          body: HomeList(),
          bottomNavigationBar: BottomNavigationBar(
              items:[
                BottomNavigationBarItem(icon: Icon(Icons.home), label: '作品库'),
                BottomNavigationBarItem(icon: Icon(Icons.school), label: '我的')
              ],
              currentIndex:state.selectNavIndex
          ),
        );
      },
    );
  }
}