{"id":20081,"date":"2020-12-21T09:15:15","date_gmt":"2020-12-21T09:15:15","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=20081"},"modified":"2020-12-21T09:22:00","modified_gmt":"2020-12-21T09:22:00","slug":"solved-unhandled-exception-navigator-operation-requested-with-a-context-that-does-not-include-a-navigator","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/solved-unhandled-exception-navigator-operation-requested-with-a-context-that-does-not-include-a-navigator\/","title":{"rendered":"[SOLVED] Unhandled Exception: Navigator operation requested with a context that does not include a Navigator."},"content":{"rendered":"\n<p>This happens because when you do Navigator.of(context), it will start from the widget associated to the context used. And then go upward in the widget tree until it either find a Navigator or there&#8217;s no more widget.<\/p>\n\n\n\n<p>So, it throws an <strong>Error<\/strong><\/p>\n\n\n\n<p><strong>Navigator operation requested with a context that does not include a Navigator.<\/strong><\/p>\n\n\n\n<p>So, how do I fix it ?<\/p>\n\n\n\n<p>First, let&#8217;s reproduce this error :<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/55859af016b482328a831024d7005c75.js\"><\/script>\n\n\n\n<p>This example creates a button that attempts to go to &#8216;\/&#8217; on click but will instead throw an exception.<\/p>\n\n\n\n<p>Notice here that in the<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">onPressed: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> Navigator.pushNamed(context, <span class=\"hljs-string\">\"\/\"<\/span>),<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>we used context passed by to build of MyApp.<\/p>\n\n\n\n<p>The problem is, MyApp is actually a parent of MaterialApp. As it&#8217;s the widget who instantiate MaterialApp! Therefore MyApp&#8217;s BuildContext doesn&#8217;t have a MaterialApp as parent!<\/p>\n\n\n\n<p>To solve this problem, we need to use a different context.<\/p>\n\n\n\n<p>In this situation, the easiest solution is to introduce a new widget as child of MaterialApp. And then use that widget&#8217;s context to do the Navigator call.<\/p>\n\n\n\n<p>There are a few ways to achieve this. You can extract home into a custom class :<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/4179bb290801380d8b2185b9be6d7df4.js\"><\/script>\n\n\n\n<p>Or you can use <strong>Builder :<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/f321db19b01b5e37e7739b73bc60187c.js\"><\/script>\n\n\n\n<p>That&#8217;s All.<\/p>\n\n\n\n<p>Thanks for Reading.<\/p>\n\n\n\n<p>Keep Coding.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/Keep_coding-3.gif\" alt=\"\" class=\"wp-image-19433\"\/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This happens because when you do Navigator.of(context), it will start from the widget associated to the context used. And then go upward in the widget tree until it either find&#8230; <\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[6331],"tags":[6203,6529,6531,6530],"class_list":["post-20081","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-flutter","tag-navigation-error","tag-navigator-operation","tag-unhandled-exception"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=20081"}],"version-history":[{"count":4,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20081\/revisions"}],"predecessor-version":[{"id":20096,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/20081\/revisions\/20096"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=20081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=20081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=20081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}