{"id":67,"date":"2024-07-04T07:29:13","date_gmt":"2024-07-04T07:29:13","guid":{"rendered":"https:\/\/flutterfever.com\/news\/?p=67"},"modified":"2024-07-04T07:29:14","modified_gmt":"2024-07-04T07:29:14","slug":"essential-flutter-widgets-when-developing-mobile-app","status":"publish","type":"post","link":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/","title":{"rendered":"Essential Flutter Widgets When Developing Mobile App"},"content":{"rendered":"\n<p>Flutter is a popular framework for building beautiful and engaging mobile apps. Learning about the core widgets is essential if you&#8217;re new to Flutter development. This article will introduce you to 2 essential Flutter widgets that you can use for every app that you create and also include the example code and demo app.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"655\" height=\"365\" src=\"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png\" alt=\"\" class=\"wp-image-68\" srcset=\"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png 655w, https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7-300x167.png 300w\" sizes=\"auto, (max-width: 655px) 100vw, 655px\" \/><figcaption class=\"wp-element-caption\">Essential Flutter Widgets When Developing Mobile App<\/figcaption><\/figure>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#The_Goals\" title=\"The Goals:\">The Goals:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#The_Good_Things\" title=\"The Good Things:\">The Good Things:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#The_Challenges\" title=\"The Challenges:\">The Challenges:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Bottom_Navigation_Bar\" title=\"Bottom Navigation Bar\">Bottom Navigation Bar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Grid_View\" title=\"Grid View\">Grid View<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Bottom_Navigation_Bar_Widget\" title=\"Bottom Navigation Bar Widget\">Bottom Navigation Bar Widget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Grid_View_Widget\" title=\"Grid View Widget\">Grid View Widget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Home_Page_Screen\" title=\"Home Page Screen\">Home Page Screen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Favourites_Screen\" title=\"Favourites Screen\">Favourites Screen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Provider\" title=\"Provider\">Provider<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Summary\" title=\"Summary\">Summary<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Benefits_of_Flutter\" title=\"Benefits of Flutter\">Benefits of Flutter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Learning_Curve\" title=\"Learning Curve\">Learning Curve<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#Essential_Widgets_need_to_be_learn\" title=\"Essential Widgets need to be learn:\">Essential Widgets need to be learn:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#References\" title=\"References\">References<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\" id=\"ember6624\"><span class=\"ez-toc-section\" id=\"The_Goals\"><\/span>The Goals:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Learning about Flutter development<\/li>\n\n\n\n<li>Getting started with Essential Widget in Flutter<\/li>\n\n\n\n<li>Can create an app using Widgets in Flutter<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6627\"><span class=\"ez-toc-section\" id=\"The_Good_Things\"><\/span>The Good Things:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.<\/li>\n\n\n\n<li>Flutter Widgets system gives more flexibility, able to combine multiple widgets<\/li>\n\n\n\n<li>Flutter has a very active and large community base<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6630\"><span class=\"ez-toc-section\" id=\"The_Challenges\"><\/span>The Challenges:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>When enter into Flutter for the first time, it is very confusing because as we know, Flutter is a collection of widgets, so it makes confused, but after knowing the flow we will be amazed.<\/li>\n\n\n\n<li>need to learn and adapt to a new programming language, namely Dart<\/li>\n<\/ol>\n\n\n\n<p id=\"ember6633\">First of all, let&#8217;s talk about the 2 widgets that we will discuss<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6635\"><span class=\"ez-toc-section\" id=\"Bottom_Navigation_Bar\"><\/span>Bottom Navigation Bar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p id=\"ember6637\">The bottom navigation bar is a cool widget that has been given by the Flutter framework.<\/p>\n\n\n\n<p id=\"ember6638\">We can easily add a bottom navigation bar to the scaffold. In the scaffold, there is an attribute called bottom Navigation Bar and we can assign Bottom Navigation Bar for that. Inside the Bottom Navigation Bar class, we can define the navigation button&#8217;s behavior and what the buttons need to show inside the bar.<\/p>\n\n\n\n<p id=\"ember6639\">There are mainly two attributes that are very useful when considering Bottom Navigation Bar.<\/p>\n\n\n\n<p id=\"ember6641\"><strong>Key Considerations:<\/strong><\/p>\n\n\n\n<p id=\"ember6643\"><strong><em>type<\/em><\/strong>:&nbsp;This attribute governs the visual behavior of the buttons when tapped. Choose between:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>fixed<\/em><\/strong>:\u00a0Maintains a static appearance, ideal for a minimalist approach.<\/li>\n\n\n\n<li><strong><em>shifting<\/em><\/strong>:\u00a0Introduces a subtle animation effect when a button is selected, enhancing user engagement.<\/li>\n<\/ul>\n\n\n\n<p id=\"ember6646\"><strong><em>items<\/em><\/strong>:&nbsp;This crucial property takes a list of <strong><em>BottomNavigationBarItem<\/em><\/strong> objects, each representing a single navigation button. You&#8217;ll need at least two items to provide users with sufficient navigation options.<\/p>\n\n\n\n<p id=\"ember6648\">For<strong> Customising Navigation Items, <\/strong>each <strong><em>BottomNavigationBarItem <\/em><\/strong>object is comprised of two essential attributes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>icon<\/em><\/strong>:\u00a0This defines the visual representation of the button using an icon from an icon font or an image asset.<\/li>\n\n\n\n<li><strong><em>label<\/em><\/strong>: While currently non-removable in Flutter, you can set the label to an empty string (&#8220;&#8221;) if you prefer a purely icon-based navigation bar. However, remember that empty labels still occupy some space, potentially affecting the UI&#8217;s overall layout.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6652\"><span class=\"ez-toc-section\" id=\"Grid_View\"><\/span>Grid View<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p id=\"ember6654\">The Grid View widget serves as a versatile tool for constructing scrollable grids of child widgets. It efficiently presents your content in a well-organized and visually pleasing manner.<\/p>\n\n\n\n<p id=\"ember6656\"><strong>Key Considerations:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>Child <\/em><\/strong>Widgets: The <strong><em>GridView<\/em><\/strong> widget acts as a container, housing an array of child widgets that you define. These child widgets can be anything from text and images to custom components, allowing you to tailor the grid&#8217;s content to your specific needs.<\/li>\n\n\n\n<li><strong>Scroll Behaviour<\/strong>: By default, the GridView offers vertical scrolling functionality, enabling users to navigate through extensive lists of items within the grid. You can customise the scroll direction to horizontal if that better suits your data presentation.<\/li>\n\n\n\n<li><strong>Grid Configuration<\/strong>: The GridView widget provides various properties for fine-tuning the grid&#8217;s layout.<\/li>\n\n\n\n<li><strong><em>gridDelegate<\/em><\/strong>:\u00a0This property controls the overall structure of the grid. You can specify the number of items per row (cross-axis count) and define the spacing between items using properties like crossAxisSpacing and mainAxisSpacing.<\/li>\n<\/ul>\n\n\n\n<p id=\"ember6660\">After we know the 2 essential widgets that are often used when <a href=\"https:\/\/flutterfever.com\/news\/flutter-app-development-unlocking-the-future-of-mobile-development-with-flutter\/\">building a mobile app<\/a>, now our goal is to create an app using these two widgets, here I will put an example code that I have created.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6662\"><span class=\"ez-toc-section\" id=\"Bottom_Navigation_Bar_Widget\"><\/span>Bottom Navigation Bar Widget<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.licdn.com\/dms\/image\/D5612AQHOgtmVsKbZXw\/article-inline_image-shrink_1500_2232\/0\/1715134264483?e=1725494400&amp;v=beta&amp;t=51CyHlAKFNz4aTWXCFkU7mRnDZvSC7fccPgOIU2zH8s\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"ember6664\">In the code above we create a Bottom Navigation Bar which has 3 tabs, namely Home, Favourites, and Settings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6666\"><span class=\"ez-toc-section\" id=\"Grid_View_Widget\"><\/span>Grid View Widget<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.licdn.com\/dms\/image\/D5612AQGC-OSEOsSjVQ\/article-inline_image-shrink_1500_2232\/0\/1715134282045?e=1725494400&amp;v=beta&amp;t=I-bWJtcsQ9AokV4yOLawtm1rwgMkFJfPeEaeVvHgRg4\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"ember6668\">In the code above we create a Grid View which has 2 <strong><em>crossAxisCounts<\/em><\/strong> which means the grid will have 2 columns, apart from that this grid also gets value data via dummy JSON, the function can be seen in the<strong><em> readJson ()<\/em><\/strong> code section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6670\"><span class=\"ez-toc-section\" id=\"Home_Page_Screen\"><\/span>Home Page Screen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.licdn.com\/dms\/image\/D5612AQGQQs68VlStnw\/article-inline_image-shrink_1000_1488\/0\/1715134316536?e=1725494400&amp;v=beta&amp;t=7TfRQJDNhC9tcSMsN8-Mew5KEiD2yvkMpqFiADiBUco\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"ember6672\">the code above used for display our home page screen with widget Grid View that we already created before.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6674\"><span class=\"ez-toc-section\" id=\"Favourites_Screen\"><\/span>Favourites Screen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.licdn.com\/dms\/image\/D5612AQGWQWbQ-bk4sw\/article-inline_image-shrink_1500_2232\/0\/1715134339949?e=1725494400&amp;v=beta&amp;t=6jeRaBsZUS90MVQf_xI3jzVrNi8uQ7GG2Ghj5YkugXE\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"ember6676\">that code above used to display our favourite images that we selected.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6678\"><span class=\"ez-toc-section\" id=\"Provider\"><\/span>Provider<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p id=\"ember6679\">To add data to the favourite page, we create utils to handle it, the utils use the default Provider from Flutter, the implementation can be seen in the code below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/media.licdn.com\/dms\/image\/D5612AQGLFmEzHnHSpw\/article-inline_image-shrink_1500_2232\/0\/1715134375848?e=1725494400&amp;v=beta&amp;t=6QmsQNqh9C23p94MWpNffmodmR5QSxlmIQ9McbWkU5w\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"ember6682\">then for the final step, just call the <strong><em>BottomNavigationBar<\/em><\/strong> widget which is already filled with the Grid view widget in <strong><em>main.<\/em><\/strong> dart.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6685\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6686\"><span class=\"ez-toc-section\" id=\"Benefits_of_Flutter\"><\/span>Benefits of Flutter<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It&#8217;s an open-source framework for building beautiful mobile apps with a single codebase.<\/li>\n\n\n\n<li>It&#8217;s development from year to year is very fast.<\/li>\n\n\n\n<li>has a large and active community base, making it easy to get information and learn about it.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6689\"><span class=\"ez-toc-section\" id=\"Learning_Curve\"><\/span>Learning Curve<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p id=\"ember6690\">Getting started with Flutter requires learning Dart programming language and understanding its widget system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6692\"><span class=\"ez-toc-section\" id=\"Essential_Widgets_need_to_be_learn\"><\/span>Essential Widgets need to be learn:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bottom Navigation Bar:<\/strong> This widget provides a way to navigate between different sections of the app. It allows customization of appearance (fixed vs shifting) and button items (icon and label).<\/li>\n\n\n\n<li><strong>Grid View:<\/strong> This widget is useful for displaying a scrollable grid of content, like images or text. It allows defining child widgets, scroll behavior (vertical\/horizontal), and grid layout (number of items per row, spacing).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ember6695\"><span class=\"ez-toc-section\" id=\"References\"><\/span>References<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/docs.flutter.dev\">https:\/\/docs.flutter.dev<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/pub.dev\/packages\/flutter_staggered_grid_view\">https:\/\/pub.dev\/packages\/flutter_staggered_grid_view<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Contact Us:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Email:<\/strong>\u00a0flutterfever@gmail.com<\/li>\n\n\n\n<li><strong>Website:<\/strong>\u00a0<a href=\"https:\/\/flutterfever.com\/\">https:\/\/flutterfever.com\/<\/a><\/li>\n\n\n\n<li><strong>Linkedin<\/strong>:\u00a0<a href=\"https:\/\/www.linkedin.com\/company\/flutter-fever\/\">https:\/\/www.linkedin.com\/company\/flutter-fever\/<\/a><\/li>\n<\/ul>\n\n\n\n<p>Stay connected and follow us for more insights on mobile development and the latest in Flutter technology.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter is a popular framework for building beautiful and engaging mobile apps. Learning about the core widgets is essential if you&#8217;re new to Flutter development. This article will introduce you to 2 essential Flutter widgets that you can use for every app that you create and also include the example code and demo app. The &#8230; <a title=\"Essential Flutter Widgets When Developing Mobile App\" class=\"read-more\" href=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/\" aria-label=\"Read more about Essential Flutter Widgets When Developing Mobile App\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":68,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[9,6,5,13,11,7,14],"class_list":["post-67","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-build-mobile-apps-with-flutter","tag-flutter","tag-flutter-app-development","tag-flutter-developer-job","tag-hire-dedicated-flutter-developers","tag-hire-flutter-app-developers","tag-mobile-application-developer-remote-job"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Essential Flutter Widgets When Developing Mobile App<\/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:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Essential Flutter Widgets When Developing Mobile App\" \/>\n<meta property=\"og:description\" content=\"Flutter is a popular framework for building beautiful and engaging mobile apps. Learning about the core widgets is essential if you&#8217;re new to Flutter development. This article will introduce you to 2 essential Flutter widgets that you can use for every app that you create and also include the example code and demo app. The ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Flutter News and Job Updates\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-04T07:29:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-04T07:29:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png\" \/>\n\t<meta property=\"og:image:width\" content=\"655\" \/>\n\t<meta property=\"og:image:height\" content=\"365\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dileep Gupta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dileep Gupta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/\",\"url\":\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/\",\"name\":\"Essential Flutter Widgets When Developing Mobile App\",\"isPartOf\":{\"@id\":\"https:\/\/flutterfever.com\/news\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png\",\"datePublished\":\"2024-07-04T07:29:13+00:00\",\"dateModified\":\"2024-07-04T07:29:14+00:00\",\"author\":{\"@id\":\"https:\/\/flutterfever.com\/news\/#\/schema\/person\/ad598819a9e5c65eb967af1266e11a2d\"},\"breadcrumb\":{\"@id\":\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#primaryimage\",\"url\":\"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png\",\"contentUrl\":\"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png\",\"width\":655,\"height\":365,\"caption\":\"Essential Flutter Widgets When Developing Mobile App\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/flutterfever.com\/news\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Essential Flutter Widgets When Developing Mobile App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/flutterfever.com\/news\/#website\",\"url\":\"https:\/\/flutterfever.com\/news\/\",\"name\":\"Flutter News and Job Updates\",\"description\":\"Flutter News, Hiring, Job, Recruitment, Freelancing and more\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/flutterfever.com\/news\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/flutterfever.com\/news\/#\/schema\/person\/ad598819a9e5c65eb967af1266e11a2d\",\"name\":\"Dileep Gupta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/flutterfever.com\/news\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8650ac6fbcef35c65894bd4e4f8b103d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8650ac6fbcef35c65894bd4e4f8b103d?s=96&d=mm&r=g\",\"caption\":\"Dileep Gupta\"},\"sameAs\":[\"https:\/\/flutterfever.com\/news\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Essential Flutter Widgets When Developing Mobile App","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:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/","og_locale":"en_US","og_type":"article","og_title":"Essential Flutter Widgets When Developing Mobile App","og_description":"Flutter is a popular framework for building beautiful and engaging mobile apps. Learning about the core widgets is essential if you&#8217;re new to Flutter development. This article will introduce you to 2 essential Flutter widgets that you can use for every app that you create and also include the example code and demo app. The ... Read more","og_url":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/","og_site_name":"Flutter News and Job Updates","article_published_time":"2024-07-04T07:29:13+00:00","article_modified_time":"2024-07-04T07:29:14+00:00","og_image":[{"width":655,"height":365,"url":"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png","type":"image\/png"}],"author":"Dileep Gupta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dileep Gupta","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/","url":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/","name":"Essential Flutter Widgets When Developing Mobile App","isPartOf":{"@id":"https:\/\/flutterfever.com\/news\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#primaryimage"},"image":{"@id":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#primaryimage"},"thumbnailUrl":"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png","datePublished":"2024-07-04T07:29:13+00:00","dateModified":"2024-07-04T07:29:14+00:00","author":{"@id":"https:\/\/flutterfever.com\/news\/#\/schema\/person\/ad598819a9e5c65eb967af1266e11a2d"},"breadcrumb":{"@id":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#primaryimage","url":"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png","contentUrl":"https:\/\/flutterfever.com\/news\/wp-content\/uploads\/2024\/07\/image-7.png","width":655,"height":365,"caption":"Essential Flutter Widgets When Developing Mobile App"},{"@type":"BreadcrumbList","@id":"https:\/\/flutterfever.com\/news\/essential-flutter-widgets-when-developing-mobile-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flutterfever.com\/news\/"},{"@type":"ListItem","position":2,"name":"Essential Flutter Widgets When Developing Mobile App"}]},{"@type":"WebSite","@id":"https:\/\/flutterfever.com\/news\/#website","url":"https:\/\/flutterfever.com\/news\/","name":"Flutter News and Job Updates","description":"Flutter News, Hiring, Job, Recruitment, Freelancing and more","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flutterfever.com\/news\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/flutterfever.com\/news\/#\/schema\/person\/ad598819a9e5c65eb967af1266e11a2d","name":"Dileep Gupta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flutterfever.com\/news\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8650ac6fbcef35c65894bd4e4f8b103d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8650ac6fbcef35c65894bd4e4f8b103d?s=96&d=mm&r=g","caption":"Dileep Gupta"},"sameAs":["https:\/\/flutterfever.com\/news"]}]}},"_links":{"self":[{"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/posts\/67","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/comments?post=67"}],"version-history":[{"count":1,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/posts\/67\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/posts\/67\/revisions\/69"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/media\/68"}],"wp:attachment":[{"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/categories?post=67"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flutterfever.com\/news\/wp-json\/wp\/v2\/tags?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}