title: BlocProvider.of() called with a context that does not contain a Bloc - even that it does
body: <p>First of, I do know how BLoC suppose to work, the idea behind it and I know the difference between <code>BlocProvider()</code> and <code>BlocProvider.value()</code> constructors.</p>
  
  <p>For simplicity, my application has 3 pages with a widget tree like this:</p>
  
  <p><code>App()</code> => <code>LoginPage()</code> => <code>HomePage()</code> => <code>UserTokensPage()</code></p>
  
  <p>I want my <code>LoginPage()</code> to have access to <code>UserBloc</code> because i need to log in user etc. To do that, I wrap <code>LoginPage()</code> builder at <code>App()</code> widget like this:</p>
  
  <pre><code>void main() =&gt; runApp(App());
  
  class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'My App',
        home: BlocProvider&lt;UserBloc&gt;(
          create: (context) =&gt; UserBloc(UserRepository()),
          child: LoginPage(),
        ),
      );
    }
  }
  </code></pre>
  
  <p>That obviously works just fine. Then, if <em>User</em> logs in successfully, he is navigated to <code>HomePage</code>. Now, I need to have access to two different blocs at my <code>HomePage</code> so I use <code>MultiBlocProvider</code> to pass existing <code>UserBloc</code> further and create a brand new one named <code>DataBloc</code>. I do it like this:</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return BlocListener&lt;UserBloc, UserState&gt;(
        listener: (context, state) {
          if (state is UserAuthenticated) {
            Navigator.of(context).push(
              MaterialPageRoute&lt;HomePage&gt;(
                builder: (_) =&gt; MultiBlocProvider(
                  providers: [
                    BlocProvider.value(
                      value: BlocProvider.of&lt;UserBloc&gt;(context),
                    ),
                    BlocProvider&lt;DataBloc&gt;(
                      create: (_) =&gt; DataBloc(DataRepository()),
                    ),
                  ],
                  child: HomePage(),
                ),
              ),
            );
          }
        },
  [...]
  </code></pre>
  
  <p>This also works. Problem happens when from <code>HomePage</code> <em>user</em> navigates to <code>UserTokensPage</code>. At <code>UserTokensPage</code> I need my already existing <code>UserBloc</code> that I want to pass with <code>BlocProvider.value()</code> constructor. I do it like this:</p>
  
  <pre><code>class _HomePageState extends State&lt;HomePage&gt; {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          centerTitle: false,
          title: Text('My App'),
          actions: &lt;Widget&gt;[
            CustomPopupButton(),
          ],
        ),
  
  [...]
  
  class CustomPopupButton extends StatelessWidget {
    const CustomPopupButton({
      Key key,
    }) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return PopupMenuButton&lt;String&gt;(
        icon: Icon(Icons.more_horiz),
        onSelected: (String choice) {
          switch (choice) {
            case PopupState.myTokens:
              {
                Navigator.of(context).push(
                  MaterialPageRoute&lt;UserTokensPage&gt;(
                    builder: (_) =&gt; BlocProvider.value(
                      value: BlocProvider.of&lt;UserBloc&gt;(context),
                      child: UserTokensPage(),
                    ),
                  ),
                );
              }
              break;
            case PopupState.signOut:
              {
                BlocProvider.of&lt;UserBloc&gt;(context).add(SignOut());
                Navigator.of(context).pop();
              }
          }
        },
  [...]
  </code></pre>
  
  <p>When I press button to navigate to <code>MyTokensPage</code> i get error with message:</p>
  
  <pre><code>════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
  The following assertion was thrown building Builder(dirty):
          BlocProvider.of() called with a context that does not contain a Bloc of type UserBloc.
  
          No ancestor could be found starting from the context that was passed to BlocProvider.of&lt;UserBloc&gt;().
  
          This can happen if:
          1. The context you used comes from a widget above the BlocProvider.
          2. You used MultiBlocProvider and didn't explicity provide the BlocProvider types.
  
          Good: BlocProvider&lt;UserBloc&gt;(create: (context) =&gt; UserBloc())
          Bad: BlocProvider(create: (context) =&gt; UserBloc()).
  
          The context used was: CustomPopupButton
  </code></pre>
  
  <p>What am I doing wrong? Is it because i have extracted <code>PopupMenuButton</code> widget that somehow loses blocs? I don't understand what I can be doing wrong.</p>