{"id":4152,"date":"2024-11-08T17:12:26","date_gmt":"2024-11-08T17:12:26","guid":{"rendered":"https:\/\/www.qworqs.com\/blog\/?p=4152"},"modified":"2024-11-08T19:35:38","modified_gmt":"2024-11-08T19:35:38","slug":"bottom-sheets","status":"publish","type":"post","link":"https:\/\/www.voodoo.business\/blog\/2024\/11\/08\/bottom-sheets\/","title":{"rendered":"Bottom Sheets"},"content":{"rendered":"\n<p>Bottom sheets are like toasts in the sense that they allow the user to keep doing what they are doing, but different, they are the notifications that appear at the bottom of the screen that a user can dismiss, they (like toasts) also don&#8217;t block the current screen<\/p>\n\n\n\n<p>The global function (<code>showBottomSheet<\/code> or modalBottomSheet) expects a BuildContext and a WidgetBuilder. The modal displays over UI elements, so keep that in mind<\/p>\n\n\n\n<p>the WidgetBuilder (That closure you should be familiar with from alerts for example, or a full fledged function definition, your choice) and the build context (you should have been passing around already by now) are straight forward, what is not is that a bottom sheet <strong>must<\/strong> be called with a context that contains a Scaffold. in other words, you\u2019ll have to be \u201cunder\u201d a scaffold widget&#8230; so to rephrase, it shows a Material Design bottom sheet in the nearest [Scaffold] ancestor<\/p>\n\n\n\n<p>Now, to understand the problem, the context we are passing around as we put it in the last paragraph, belongs to the top-level widget, that widget has a scaffold obviously, but the scaffold is under it, when our bottom sheet wants to attach to a widget, using the <strong>of-context pattern<\/strong> to find the scaffold will fail as we are looking up the tree not down where the scaffold is !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bottom sheets are like toasts in the sense that they allow the user to keep doing what they are doing, but different, they are the notifications that appear at the bottom of the screen that a user can dismiss, they (like toasts) also don&#8217;t block the current screen The global function (showBottomSheet or modalBottomSheet) expects [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[203,160],"tags":[],"class_list":["post-4152","post","type-post","status-publish","format-standard","hentry","category-dart-flutter","category-software-development"],"_links":{"self":[{"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/posts\/4152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/comments?post=4152"}],"version-history":[{"count":9,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/posts\/4152\/revisions"}],"predecessor-version":[{"id":4167,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/posts\/4152\/revisions\/4167"}],"wp:attachment":[{"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/media?parent=4152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/categories?post=4152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.voodoo.business\/blog\/wp-json\/wp\/v2\/tags?post=4152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}