{"id":6716,"date":"2021-04-30T10:30:11","date_gmt":"2021-04-30T05:00:11","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6716"},"modified":"2021-04-30T10:27:46","modified_gmt":"2021-04-30T04:57:46","slug":"bottom-navigation-bar","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/","title":{"rendered":"Bottom Navigation Bar"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">A material widget that appears at the bottom of an app and allows users to choose from three to five different views. Multiple objects in the form of text marks, icons, or both are laid out on top of a piece of material in the bottom navigation bar.\u00a0<\/span><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-6717 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Bottom-Navigation-Bar-300x101.png\" alt=\"\" width=\"425\" height=\"143\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Bottom-Navigation-Bar-300x101.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Bottom-Navigation-Bar-1024x344.png 1024w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Bottom-Navigation-Bar-768x258.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Bottom-Navigation-Bar-624x210.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Bottom-Navigation-Bar.png 1364w\" sizes=\"(max-width: 425px) 100vw, 425px\" \/><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">It allows users to quickly navigate between an app&#8217;s top-level views. Side navigation could be a better match for larger displays.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">The <\/span><b>BottomNavigationBar<\/b><span style=\"font-weight: 400;\"> widget in Flutter seems to be simply a row of destination buttons with only a single callback which is transferred to the index of the tapped button.<\/span><\/li>\n<\/ul>\n<p><b>Before you use BottomNavigationBar in your app, there are a few things to keep in mind.<\/b><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\">The number of items in your <\/span><b>BottomNavigationBarItems<\/b><span style=\"font-weight: 400;\"> is limited to 5 (with a minimum of 2).<\/span><\/li>\n<li><span style=\"font-weight: 400;\">There will be an error if you have less than two items.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">You must define an icon and a label property, as well as the widgets that go with them.<\/span><\/li>\n<\/ol>\n<p><strong>Basic code example that creates a Bottom Navigation Bar in Flutter.<\/strong><\/p>\n<p><img decoding=\"async\" class=\" wp-image-6718 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Navigation-Bar-Code-300x196.png\" alt=\"\" width=\"501\" height=\"328\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Navigation-Bar-Code-300x196.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Navigation-Bar-Code-1024x669.png 1024w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Navigation-Bar-Code-768x502.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Navigation-Bar-Code-624x408.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/Navigation-Bar-Code.png 1276w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/p>\n<p><b>Bottom NavigationBar Properties &#8211;\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">A list of properties can be configured when building a <\/span><b>BottomNavigationBar<\/b><span style=\"font-weight: 400;\"> widget.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Items<\/b><span style=\"font-weight: 400;\"> &#8211; It defines the list which is shown in the <\/span><b>Bottom NavigationBar.<\/b><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Code<\/span> <span style=\"font-weight: 400;\">example<\/span> <span style=\"font-weight: 400;\">to create a <\/span><b>BottomNavigationBarItem.<\/b><\/p>\n<p><img decoding=\"async\" class=\" wp-image-6719 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/BottomNavigationBarItem-300x63.png\" alt=\"\" width=\"419\" height=\"88\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/BottomNavigationBarItem-300x63.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/BottomNavigationBarItem-768x162.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/BottomNavigationBarItem-624x131.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/03\/BottomNavigationBarItem.png 770w\" sizes=\"(max-width: 419px) 100vw, 419px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>currentIndex <\/b><span style=\"font-weight: 400;\">&#8211; It tells us which bottom navigation bar object is currently active.<\/span><\/li>\n<li aria-level=\"1\"><b>onTap <\/b><span style=\"font-weight: 400;\">&#8211;<\/span> <span style=\"font-weight: 400;\">When we tap one of the items on a bar, then we call this method.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>ionSize<\/b> <span style=\"font-weight: 400;\">&#8211; It defines the size of all bottom navigation items icons.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>FixedColor <\/b><span style=\"font-weight: 400;\">&#8211; It&#8217;s used to change the color of the object you&#8217;ve chosen. It will be shown if no color has been assigned to the icon or description.<\/span><\/li>\n<li aria-level=\"1\"><b>type <\/b><span style=\"font-weight: 400;\">&#8211; It defines how a bottom navigation bar looks and behaves.<\/span><\/li>\n<\/ul>\n<p><b><\/b><br \/>\n<span style=\"font-weight: 400;\">It has two distinct personalities: <\/span><b>set<\/b><span style=\"font-weight: 400;\"> and <\/span><b>changing<\/b><span style=\"font-weight: 400;\">. If it&#8217;s null, the default value is fixed. Otherwise, shifting would be used. When shifting is used, when the button is tapped, the user can see an animation. Color change will be used as a UI feature of the moving Bottom Navigation Bar in our case.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>Complete Code Example &#8211;<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Example of a Flutter app that uses the <\/span><b><i>BottomNavigationBar<\/i><\/b> <span style=\"font-weight: 400;\">widget.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6722 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image6-245x300.png\" alt=\"\" width=\"551\" height=\"674\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image6-245x300.png 245w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image6-836x1024.png 836w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image6-768x940.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image6-1255x1536.png 1255w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image6-624x764.png 624w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image6.png 1307w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/p>\n<p><strong>The Flutter app will look and work as shown in the images below if you build and run the code.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6725 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image2-169x300.png\" alt=\"\" width=\"251\" height=\"445\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image2-169x300.png 169w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image2.png 336w\" sizes=\"(max-width: 251px) 100vw, 251px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><strong>The first BottomNavigationBarItem is selected.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-6727 aligncenter\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image3-171x300.png\" alt=\"\" width=\"251\" height=\"441\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image3-171x300.png 171w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/image3.png 340w\" sizes=\"(max-width: 251px) 100vw, 251px\" \/><\/p>\n<p style=\"text-align: center;\"><strong>The screen when the Profile Button is tapped.<\/strong><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; A material widget that appears at the bottom of an app and allows users to choose from three to five different views. Multiple objects in the form of text marks, icons, or both are laid out on top of a piece of material in the bottom navigation bar.\u00a0 It allows users to quickly navigate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6730,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[598,599,600],"class_list":["post-6716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","tag-android-developers","tag-bottom-navigation-bar","tag-bottom-navigation-bar-android-developers"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bottom Navigation Bar - Android Developers | InnovationM<\/title>\n<meta name=\"description\" content=\"Bottom Navigation Bar - Android Developers. The bottom navigation bar in Flutter can contain multiple items such as text labels,icons,or both.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bottom Navigation Bar - Android Developers | InnovationM\" \/>\n<meta property=\"og:description\" content=\"Bottom Navigation Bar - Android Developers. The bottom navigation bar in Flutter can contain multiple items such as text labels,icons,or both.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-30T05:00:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Bottom-Navigation-Bar-in-Flutter.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Bottom Navigation Bar\",\"datePublished\":\"2021-04-30T05:00:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/\"},\"wordCount\":398,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Bottom-Navigation-Bar-in-Flutter.png\",\"keywords\":[\"Android Developers\",\"Bottom Navigation Bar\",\"Bottom Navigation Bar - Android Developers\"],\"articleSection\":[\"Android\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/\",\"name\":\"Bottom Navigation Bar - Android Developers | InnovationM\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Bottom-Navigation-Bar-in-Flutter.png\",\"datePublished\":\"2021-04-30T05:00:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"description\":\"Bottom Navigation Bar - Android Developers. The bottom navigation bar in Flutter can contain multiple items such as text labels,icons,or both.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Bottom-Navigation-Bar-in-Flutter.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/Bottom-Navigation-Bar-in-Flutter.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/bottom-navigation-bar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bottom Navigation Bar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bottom Navigation Bar - Android Developers | InnovationM","description":"Bottom Navigation Bar - Android Developers. The bottom navigation bar in Flutter can contain multiple items such as text labels,icons,or both.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/","og_locale":"en_US","og_type":"article","og_title":"Bottom Navigation Bar - Android Developers | InnovationM","og_description":"Bottom Navigation Bar - Android Developers. The bottom navigation bar in Flutter can contain multiple items such as text labels,icons,or both.","og_url":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-04-30T05:00:11+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Bottom-Navigation-Bar-in-Flutter.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Bottom Navigation Bar","datePublished":"2021-04-30T05:00:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/"},"wordCount":398,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Bottom-Navigation-Bar-in-Flutter.png","keywords":["Android Developers","Bottom Navigation Bar","Bottom Navigation Bar - Android Developers"],"articleSection":["Android"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/","url":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/","name":"Bottom Navigation Bar - Android Developers | InnovationM","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Bottom-Navigation-Bar-in-Flutter.png","datePublished":"2021-04-30T05:00:11+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"description":"Bottom Navigation Bar - Android Developers. The bottom navigation bar in Flutter can contain multiple items such as text labels,icons,or both.","breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Bottom-Navigation-Bar-in-Flutter.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/04\/Bottom-Navigation-Bar-in-Flutter.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/bottom-navigation-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bottom Navigation Bar"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6716"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6716\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6730"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}