{"id":5038,"date":"2020-10-06T10:46:01","date_gmt":"2020-10-06T10:46:01","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=5038"},"modified":"2020-10-20T12:22:39","modified_gmt":"2020-10-20T12:22:39","slug":"what-is-bottomnavigationbar-widget-in-flutter","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/","title":{"rendered":"Basics and Implementation of BottomNavigationBar Widget in Flutter"},"content":{"rendered":"\n<p>In our <a href=\"https:\/\/www.folio3.com\/what-is-flutter-and-why-everyone-is-talking-about-flutter-app-development\">last blog<\/a>, we talk about what Flutter is and why there is so much talk about it. We also talked about how to set up and start working with it. In this blog, we will be discussing the basics of Flutter and we will see the implementation of a Material Widget.<\/p>\n\n\n\n<p><strong>Reader: <\/strong><em>Finally some action in the blog, hopefully, less talk this time.<\/em><\/p>\n\n\n\n<p><strong>Me: <\/strong><em>You started again! Don\u2019t make me lose my tempo, by Interrupting me.<\/em><\/p>\n\n\n\n<p><strong>Reader: <\/strong><em>Okiii!!<\/em><\/p>\n\n\n\n<p>We\u2019ll start by creating a new project.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/31QdRKSSkoJ_3ARoFx5Oszuo1XlAWfA50_DEba6giPpwtsE1AYr2US3Fjq1crXwjHNPTwb4nudKzdZd8fsJS1FanfxYFlsd1ZT4bKTjX6gUSs2KLO0YBsBixV4Fsd9IkMS_A6q2m\" alt=\"\"\/><\/figure>\n\n\n\n<p>So here we have created a new project with <em>\u2018flutter create\u2019 <\/em>command. This will result in a started project which Flutter team was generous enough to make for us. It will look something like this.<br><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/LTu95Muf5BEOqVXgA1sCkOzUczqSxb6S6xQBeeHIIZxPcFLUdAgrZu9l7d_hr1hLiZoupdqK9tuVgO8jtiILG3OHpDcZdiWgo0QUJp_HCSNPEqO2oZoR5V_xOlrj07h0qWcy4-Qd\" alt=\"\" width=\"308\" height=\"642\"\/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/WPy4Xqh8z9SaIJog1TfHLRQIVLvfHOIL1__3j4KHwOr__rqvGZ2zJbQfyQbTHOFTy5z8l8jB8A64Y1xR5nKtb9n7NfzNu4Rr8kgwKjnZz55ZYTIhToU2pOLjKVIkwggFW2-YI0uc\" alt=\"\" width=\"310\" height=\"636\"\/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Lets jump into the code now,<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/PWcwLgVwwk9-pBX5e3f7hd7N29rIJrvbpogVpRvICB2BZObwc3R6voaK-fmZD3NDsMbzweSuQS9n2WLPQsSFfJMsRrqDR7UBT1sIMnp1vfy5KybKElpPiut8H3D7-GMzb5VamJg5\" alt=\"\"\/><\/figure>\n\n\n\n<p>Let\u2019s talk about first section,<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We see an import statement, which is self explanatory that we will be using stuff from this package.<\/li><li>Then we see a void function named <strong>main(),<\/strong><ul><li>This is the entry point of any flutter application, it will return a <strong>runApp()<\/strong> function which takes the Root widget from where your app\u2019s Widget Tree will start, which in our case is <strong>My App.<\/strong><\/li><\/ul><\/li><li>So you remember widgets (everything is a widget), My App is a class which extends the Stateless Widget class, which is needed to create your own Stateless Widget.<\/li><li>Then we see a @<em>override <\/em>statement and a<strong> build()<\/strong> method,<ul><li>The <em>@override <\/em>statement is used when you are overriding a method, here we are overriding the <strong>build() <\/strong>method of Stateless Widget Class.<\/li><li><strong>build() <\/strong>method is where we draw\/code the widget\u2019s look and feel.<\/li><li>It takes one parameter i.e <em>BuildContext, <\/em>flutter uses this to locate the widget in the Widget tree.&nbsp;<\/li><li>Every Widget has to override this method.<\/li><\/ul><\/li><li>Here in our overriding method, we are returning a <strong>MaterialApp <\/strong>widget, which is our Application Widget, it basically wraps all your widgets and makes it into an application.<ul><li>Title: Defines the title of the application.<\/li><li>Theme: theme configuration of the application.<\/li><li>Home: home\/landing page of the application, in our case its the <strong>MyHomePage <\/strong>widget.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Reader: <\/strong><em>Are you going to code something or just talk about already written code?<\/em><\/p>\n\n\n\n<p><strong><em>Me (Sarcastically): <\/em><\/strong>&nbsp;<em>Talk! Why code when its already done.<\/em><\/p>\n\n\n\n<p><strong>Me: <\/strong><em>I will code, i mean copy paste from somewhere don\u2019t worry.<\/em><\/p>\n\n\n\n<p>Let\u2019s remove the <strong>MyHomePage <\/strong>widget code and write our own to implement a bottom navigation bar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/7O2fNDE-4iwt8fvuatXu_0fAAdhv-yqTtDrzMk9kdbn32fYWYGZxD9vPlvSfLAzVaGij22hHKGyLaIwSQX2tKYRPPmp___TfLh6qkwMYSLxWa79HoTTx0V-_M518V-XbYIUqi40U\" alt=\"\"\/><\/figure>\n\n\n\n<p>Let&#8217;s jump into this section,<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We created a stateful widget by extending our widget class with StatefulWidget class.<\/li><li>We create the state for our stateful widget by overriding the createState method, and providing our own State class which is extended with the State class.<\/li><li>Now you see there is a <strong>title<\/strong> in Stateful Widget and and <strong>_selectedIndex<\/strong> in our state class.<ul><li>The <strong>title<\/strong> in StatefulWidget is the information that our widget needs to render, and this is what it will get from outside.<\/li><li>The <strong>_selectedIndex <\/strong>in our State class, represents what our state is made of and this is what will be changing in the widget, which is why we needed it to be a <strong>StatefulWidget.<\/strong><\/li><\/ul><\/li><li>In our build method we have our <strong>BottomNavigationBar <\/strong>Widget,<ul><li><strong>Items <\/strong>are the navigation buttons\/options.<\/li><li><strong>currentIndex <\/strong>defines the active widget, which is currently being pointed.<\/li><li><strong>selectedItemColor <\/strong>defines the color attribute of the navigation option which is currently selected.<\/li><li><strong>onTap <\/strong>defines the function that will trigger on tapping any navigation option. Here we will implement the change in widget on tapping any navigation option.<\/li><\/ul><\/li><li>Our _<strong>onItemTapped <\/strong>function updates the state with the index of tapped navigation option. Which then results in updating the <strong>currentIndex <\/strong>of <strong>BottomNavigationBar.<\/strong><\/li><li>The body of our <strong>Scaffold <\/strong>widget is <strong>Center Widget<\/strong>, which positions its child widget to the center of it\u2019s parent widget.<\/li><li>The child of <strong>Center <\/strong>widget is an array of widgets pointing to an index of its own.<ul><li>The pointing is done by our state member <strong>_selectedIndex<\/strong>, so when it changes the pointing changes, ultimately updating the child widget of <strong>Center.<\/strong><\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Reader: <\/strong><em>Hey!, wait a second I recognize this code.<\/em><\/p>\n\n\n\n<p><strong>Reader: <\/strong><em>You copy pasted this code from Flutter widget docs\u2026.<\/em><\/p>\n\n\n\n<p><strong>Me (stammering): <\/strong><em>Uh, umm, err\u2026<\/em><\/p>\n\n\n\n<p><strong>Me: <\/strong><em>So what, why would i reinvent the wheel. I tempered it a little.<\/em><\/p>\n\n\n\n<p><strong>Reader: <\/strong><em>Ohh! Come on\u2026.<\/em><\/p>\n\n\n\n<p><strong>Me: <\/strong><em>Hey you! Susssh! Let me complete.<\/em><\/p>\n\n\n\n<p>Now we will add some widgets to our widgets array.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/cwlNd3he3fXjhFEMKBCY6jr-FN4DfibGt6IIokRkASsXF3Rgne9tXUcYntBF66I7At8musjxoTF8w3hwPtkYMpNQHzve3RczWQV_I1iWCrtGx55JBpkwptl5UdUpBKZWqd9YuylY\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Me (proudly): <\/strong><em>Look I changed the names of components because that&#8217;s all I needed.<\/em><\/p>\n\n\n\n<p><strong>Reader (sarcastically): <\/strong><em>OMG! such a professional work.<\/em><\/p>\n\n\n\n<p><strong>Me (with a smirk): <\/strong><em>Always complaining..!<\/em><\/p>\n\n\n\n<p>We just added some <strong>Text<\/strong> Widgets to demonstrate how the change is happening. In a real application, these will be more complex widgets or widget trees.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/X8Qdu368TA-Py40iKr12WbVrrmmeVFejCtxfFInDokEAH5epARLIjPMKeRRxzHqjb3lekDc-7RuWT-2u6B4t5_ajWnT75yFdi2nPkoWYHpFUhdjuQgWCCXh6a0t2zWF7JA3I08-v\" alt=\"\" width=\"273\" height=\"575\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Peace out..!<\/strong><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>In our last blog, we talk about what Flutter is and why there is so much talk about it. We also talked about how to set up and start working with it. In this blog, we will be discussing the basics of Flutter and we will see the implementation of a Material Widget. Reader: Finally &hellip; <a href=\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Basics and Implementation of BottomNavigationBar Widget in Flutter&#8221;<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":5118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[53],"tags":[],"class_list":["post-5038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter-app-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Basics and Implementation of BottomNavigationBar Widget in Flutter - Mobile App Development Services<\/title>\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.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basics and Implementation of BottomNavigationBar Widget in Flutter - Mobile App Development Services\" \/>\n<meta property=\"og:description\" content=\"In our last blog, we talk about what Flutter is and why there is so much talk about it. We also talked about how to set up and start working with it. In this blog, we will be discussing the basics of Flutter and we will see the implementation of a Material Widget. Reader: Finally &hellip; Continue reading &quot;Basics and Implementation of BottomNavigationBar Widget in Flutter&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-06T10:46:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-20T12:22:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"710\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"Basics and Implementation of BottomNavigationBar Widget in Flutter\",\"datePublished\":\"2020-10-06T10:46:01+00:00\",\"dateModified\":\"2020-10-20T12:22:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/\"},\"wordCount\":793,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg\",\"articleSection\":[\"flutter-app-development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/\",\"name\":\"Basics and Implementation of BottomNavigationBar Widget in Flutter - Mobile App Development Services\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg\",\"datePublished\":\"2020-10-06T10:46:01+00:00\",\"dateModified\":\"2020-10-20T12:22:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg\",\"width\":1280,\"height\":710,\"caption\":\"Basics and Implementation of BottomNavigationBar Widget in Flutter\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basics and Implementation of BottomNavigationBar Widget in Flutter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Basics and Implementation of BottomNavigationBar Widget in Flutter - Mobile App Development Services","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.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/","og_locale":"en_US","og_type":"article","og_title":"Basics and Implementation of BottomNavigationBar Widget in Flutter - Mobile App Development Services","og_description":"In our last blog, we talk about what Flutter is and why there is so much talk about it. We also talked about how to set up and start working with it. In this blog, we will be discussing the basics of Flutter and we will see the implementation of a Material Widget. Reader: Finally &hellip; Continue reading \"Basics and Implementation of BottomNavigationBar Widget in Flutter\"","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/","og_site_name":"Mobile App Development Services","article_published_time":"2020-10-06T10:46:01+00:00","article_modified_time":"2020-10-20T12:22:39+00:00","og_image":[{"width":1280,"height":710,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg","type":"image\/jpeg"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"Basics and Implementation of BottomNavigationBar Widget in Flutter","datePublished":"2020-10-06T10:46:01+00:00","dateModified":"2020-10-20T12:22:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/"},"wordCount":793,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg","articleSection":["flutter-app-development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/","name":"Basics and Implementation of BottomNavigationBar Widget in Flutter - Mobile App Development Services","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg","datePublished":"2020-10-06T10:46:01+00:00","dateModified":"2020-10-20T12:22:39+00:00","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/10\/Basics-and-Implementation-of-BottomNavigationBar-Widget-in-Flutter.jpg","width":1280,"height":710,"caption":"Basics and Implementation of BottomNavigationBar Widget in Flutter"},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-bottomnavigationbar-widget-in-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"Basics and Implementation of BottomNavigationBar Widget in Flutter"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5038"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=5038"}],"version-history":[{"count":6,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5038\/revisions"}],"predecessor-version":[{"id":5120,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5038\/revisions\/5120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/5118"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=5038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=5038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=5038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}