title: Flutter Provider nested navigation
body: <p>I have a problem with provider and navigation. </p>
  
  <p>I have a <code>HomeScreen</code> with a list of objects. When you click on one object I navigate to a <code>DetailScreen</code> with tab navigation. This <code>DetailScreen</code> is wrapped with a ChangenotifierProvider which provides a <code>ViewModel</code></p>
  
  <p>Now, when I navigate to another screen with <code>Navigator.of(context).push(EditScreen)</code> I can't access the <code>ViewModel</code> within the <code>EditScreen</code>
  The following error is thrown</p>
  
  <pre><code>════════ Exception caught by gesture ═══════════════════════════════════════════
  The following ProviderNotFoundException was thrown while handling a gesture:
  Error: Could not find the correct Provider&lt;ViewModel&gt; above this EditScreen Widget
  </code></pre>
  
  <p>This is a simple overview of what I try to achieve</p>
  
  <pre><code>Home Screen
   - Detail Screen (wrapped with ChangeNotifierProvider)
     - Edit Screen
       - access provider from here
  </code></pre>
  
  <p>I know what the problem is. I'm pushing a new screen on the stack and the change notifier is not available anymore.
  I thought about creating a Detail Repository on top of my App which holds all of the ViewModels for the DetailView. </p>
  
  <p>I know I could wrap the ChangeNotifier around my MaterialApp, but I don't want that, or can't do it because I don't know which Detail-ViewModel I need. I want a ViewModel for every item in the list</p>
  
  <p>I really don't know what's the best way to solve this. Thanks everyone for the help</p>
  
  <p>Here is a quick example app:</p>
  
  <p><a href="https://i.stack.imgur.com/4wkY6.png" rel="noreferrer">This is a picture of the image tree</a></p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatelessWidget {
    const MyHomePage({Key key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Center(
              child: RaisedButton(
        child: Text("DetailView"),
        onPressed: () =&gt; Navigator.of(context).push(MaterialPageRoute(
            builder: (context) =&gt; ChangeNotifierProvider(
                create: (_) =&gt; ViewModel(), child: DetailScreen()))),
      )));
    }
  }
  
  class DetailScreen extends StatelessWidget {
    const DetailScreen({Key key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Center(
        child: RaisedButton(
          child: Text("EditScreen"),
          onPressed: () =&gt; Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) =&gt; EditScreen())),
        ),
      ));
    }
  }
  
  class EditScreen extends StatelessWidget {
    const EditScreen({Key key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: RaisedButton(
              child: Text("Print"),
              onPressed: () =&gt;
                  Provider.of&lt;ViewModel&gt;(context, listen: false).printNumber()),
        ),
      );
    }
  }
  
  class ViewModel extends ChangeNotifier {
    printNumber() {
      print(2);
    }
  }
  </code></pre>