{"id":2501,"date":"2019-12-13T08:42:07","date_gmt":"2019-12-13T08:42:07","guid":{"rendered":"https:\/\/eluminoustechnologies.com\/blog\/?p=2501"},"modified":"2025-09-04T12:49:50","modified_gmt":"2025-09-04T12:49:50","slug":"how-to-create-flutter-widget","status":"publish","type":"post","link":"https:\/\/eluminoustechnologies.com\/blog\/how-to-create-flutter-widget\/","title":{"rendered":"How to Build Your First Flutter Widget"},"content":{"rendered":"<p>As a mobile app development framework, Flutter has many things going for it. It\u2019s easy to learn, reduces costs of developing multi-platform apps, has growing community support, and for all intents and purposes, is on its way to becoming the preferred mobile development framework in the future.<\/p>\n<p>But there\u2019s one aspect of Flutter that has won it plaudits from mobile app developers from around the world \u2013 Widgets.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent 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-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"#\" data-href=\"https:\/\/eluminoustechnologies.com\/blog\/how-to-create-flutter-widget\/#what-are-flutter-widgets\" >What are Flutter Widgets?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"#\" data-href=\"https:\/\/eluminoustechnologies.com\/blog\/how-to-create-flutter-widget\/#flutter-material-cupertino-widgets\" >Flutter Material &amp; Cupertino Widgets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"#\" data-href=\"https:\/\/eluminoustechnologies.com\/blog\/how-to-create-flutter-widget\/#how-are-flutter-widgets-structured\" >How are Flutter Widgets Structured?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"#\" data-href=\"https:\/\/eluminoustechnologies.com\/blog\/how-to-create-flutter-widget\/#what-are-the-types-of-flutter-widgets\" >What are the Types of Flutter Widgets?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"#\" data-href=\"https:\/\/eluminoustechnologies.com\/blog\/how-to-create-flutter-widget\/#how-to-create-a-flutter-widget\" >How to Create a Flutter Widget?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"#\" data-href=\"https:\/\/eluminoustechnologies.com\/blog\/how-to-create-flutter-widget\/#flutter-widget-examples\" >Flutter Widget Examples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"#\" data-href=\"https:\/\/eluminoustechnologies.com\/blog\/how-to-create-flutter-widget\/#over-to-you\" >Over to You<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"what-are-flutter-widgets\"><\/span>What are Flutter Widgets?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In <strong>Flutter app development<\/strong>, widgets are everything.<\/p>\n<p>To give you an analogy, Flutter widgets are similar to the small reusable components used in JS frameworks like Vue or React.<\/p>\n<p>Every element of your Flutter app\u2019s user interface is a widget. So, the text is a widget, as are the buttons, images, checkboxes, and everything else displayed by your app.<\/p>\n<p>If you\u2019re familiar with Android or iOS development, then Flutter widgets have the same role as views (Android) and UIViews (iOS). But for a more accurate description of widgets, think of them as a blueprint that Flutter uses to create view elements and display them on your device\u2019s screen.<\/p>\n<p>This also means there\u2019s more to Flutter widgets than just structural components. So, for instance, the layout columns in your Flutter app are widgets, as are elements like padding, styles, and even gesture detectors.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"flutter-material-cupertino-widgets\"><\/span>Flutter Material &amp; Cupertino Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>One of the best things about Flutter is the wide variety of Android and iOS style widgets it offers out of the box. For a newbie <a title=\"Flutter app developer\" href=\"https:\/\/eluminoustechnologies.com\/hire-developers\/flutter\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter app developer<\/strong><\/a>, this comes handy as it enables them to create beautiful mobile apps even with a passing knowledge of design.<\/p>\n<p>While the Material widgets are designed to appear like Android applications, the Cupertino ones stand-in for iOS apps. Apart from hundreds of such in-built widgets, Flutter also lets you create custom widgets with minimal effort.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"how-are-flutter-widgets-structured\"><\/span>How are Flutter Widgets Structured?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The widget tree in Flutter consists of parent and child widgets. This widget tree is the layout that greets you on opening a Flutter app. Below is a widget tree for a default Flutter app. The widgets visible to you are highlighted by the red lines. The remaining non-highlighted elements in the widget tree make up the app\u2019s layout and functionalities.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2510 lazyload\" data-src=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widget-structure.png?lossy=2&strip=1&webp=1\" alt=\"flutter-widget-structure\" width=\"729\" height=\"536\" title=\"\" data-srcset=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widget-structure.png?lossy=2&amp;strip=1&amp;webp=1 729w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widget-structure.png?size=128x94&amp;lossy=2&amp;strip=1&amp;webp=1 128w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widget-structure.png?size=256x188&amp;lossy=2&amp;strip=1&amp;webp=1 256w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widget-structure.png?size=384x282&amp;lossy=2&amp;strip=1&amp;webp=1 384w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widget-structure.png?size=512x376&amp;lossy=2&amp;strip=1&amp;webp=1 512w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widget-structure.png?size=640x471&amp;lossy=2&amp;strip=1&amp;webp=1 640w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 729px; --smush-placeholder-aspect-ratio: 729\/536;\" data-original-sizes=\"(max-width: 729px) 100vw, 729px\"><\/p>\n<div class=\"blue-bg-box-small text-align-center mb-4\"><em>Source: Pusher<\/em><\/div>\n<h2><span class=\"ez-toc-section\" id=\"what-are-the-types-of-flutter-widgets\"><\/span>What are the Types of Flutter Widgets?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Widgets in Flutter are immutable, which means they can\u2019t be changed. A widget\u2019s properties are final and cannot be set unless the widget is initialized. This makes it easier and inexpensive to recreate a widget when a widget tree is changed.<\/p>\n<p>In Flutter, there are two kinds of widgets \u2013 stateless and stateful.<\/p>\n<p>As apparent by their name, stateless Flutter widgets do not store changeable values. For instance, the Icon widget shown in the fig. above is stateless as it doesn\u2019t change after you first create it. The same can be said of the Text widget too, where you have to create a new widget altogether to change the actual text value. In other words, you can\u2019t modify the text value of an existing Text widget.<\/p>\n<p>Stateful widgets, on the other hand, allow you to change the state of a widget. Now that might sound contradictory to the assertion at the start of this section that said Flutter widgets cannot be changed. But, it isn\u2019t. Here\u2019s how.<\/p>\n<p>While it\u2019s indeed immutable, a stateful widget creates a State object to keep track of any changes. So, when the values in the State object are changed, it creates an entirely new widget that reflects these changed values.<\/p>\n<p>An apt example to explain stateful widgets is Checkbox. Its state changes every time the user ticks a box. Other examples of Stateful widgets include Form, TextField, and Slider.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"how-to-create-a-flutter-widget\"><\/span>How to Create a Flutter Widget?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You don\u2019t need to know a lot about Flutter to create widgets. But what you do need is a <a title=\"Flutter app development\" href=\"https:\/\/eluminoustechnologies.com\/hire-developers\/flutter\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter app development<\/strong><\/a> environment. You can choose and set up one from either Android Studio, IntelliJ, or Visual Studio Code. And yes, you also need to know the process of creating a Flutter app.<br \/>\nDo check it out before proceeding with the rest of this Flutter widgets tutorial. We\u2019ve included plenty of resources and links to help you understand how to write your first Flutter app.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"flutter-widget-examples\"><\/span>Flutter Widget Examples<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now that you know what\u2019s needed to build a Flutter app, you can understand how Flutter widgets work through these simple examples. Most of these are common widget examples whose code you can run in your preferred editor for better understanding.<\/p>\n<p>If you\u2019ve read the guide linked above, you\u2019ll know that main.dart is where your app\u2019s code is stored.<\/p>\n<p>To understand Flutter widgets better, we\u2019ll start from a clean slate. So, open the main.dart file and replace all its contents with void main() {}.<\/p>\n<p>Now reload the app and you\u2019ll be greeted by an empty screen. The main() forms the starting point for any Flutter app. But by emptying its code, we\u2019ve created an app that does nothing. Instead, we\u2019ll use it to test the codes for the different Flutter widgets below.<\/p>\n<h3>Flutter Container Widget<\/h3>\n<p>As obvious by the name, the container widget comprises all the other widgets of a Flutter app. But rather than putting other widgets, we\u2019ll tinker around with its color value.<\/p>\n<p>Open the main.dart file and replace all its code with the below code.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2504 lazyload\" data-src=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-1.png?lossy=2&strip=1&webp=1\" alt=\"flutter code 1\" width=\"766\" height=\"313\" title=\"\" data-srcset=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-1.png?lossy=2&amp;strip=1&amp;webp=1 766w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-1.png?size=128x52&amp;lossy=2&amp;strip=1&amp;webp=1 128w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-1.png?size=256x105&amp;lossy=2&amp;strip=1&amp;webp=1 256w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-1.png?size=384x157&amp;lossy=2&amp;strip=1&amp;webp=1 384w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-1.png?size=512x209&amp;lossy=2&amp;strip=1&amp;webp=1 512w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-1.png?size=640x262&amp;lossy=2&amp;strip=1&amp;webp=1 640w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 766px; --smush-placeholder-aspect-ratio: 766\/313;\" data-original-sizes=\"(max-width: 766px) 100vw, 766px\"><\/p>\n<p>Now, restart the app and you will be greeted by a green screen. You can try out different colors by replacing the Colors.green with values like Colors.red, Colors.blueAccent, and Colors.deepPurple.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2507 lazyload\" data-src=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-colors.png?lossy=2&strip=1&webp=1\" alt=\"flutter-widgets-colors\" width=\"766\" height=\"288\" title=\"\" data-srcset=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-colors.png?lossy=2&amp;strip=1&amp;webp=1 766w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-colors.png?size=128x48&amp;lossy=2&amp;strip=1&amp;webp=1 128w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-colors.png?size=256x96&amp;lossy=2&amp;strip=1&amp;webp=1 256w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-colors.png?size=384x144&amp;lossy=2&amp;strip=1&amp;webp=1 384w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-colors.png?size=512x193&amp;lossy=2&amp;strip=1&amp;webp=1 512w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-colors.png?size=640x241&amp;lossy=2&amp;strip=1&amp;webp=1 640w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 766px; --smush-placeholder-aspect-ratio: 766\/288;\" data-original-sizes=\"(max-width: 766px) 100vw, 766px\"><\/p>\n<div class=\"blue-bg-box-small text-align-center mb-4\"><em>Source: Pusher<\/em><\/div>\n<h3>Flutter Text Widget<\/h3>\n<p>While that was easy enough, we\u2019ll now look at how you can change the property values for a Flutter widget.<\/p>\n<p>Let\u2019s consider something that\u2019s an essential part of whichever app you create \u2013 text. For creating this widget, we use the MaterialApp widget, which not only gives the app a nicer look but also makes the code simple.<\/p>\n<p>Moreover, the build() method also lets you use the hot reload function to see your changes instantaneously, instead of restarting the app every time as in the Container widget example above.<\/p>\n<p>Now, replace all the code in the main.dart file with the below code.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2505 lazyload\" data-src=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-2.png?lossy=2&strip=1&webp=1\" alt=\"flutter code 2\" width=\"645\" height=\"744\" title=\"\" data-srcset=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-2.png?lossy=2&amp;strip=1&amp;webp=1 645w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-2.png?size=128x148&amp;lossy=2&amp;strip=1&amp;webp=1 128w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-2.png?size=256x295&amp;lossy=2&amp;strip=1&amp;webp=1 256w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-2.png?size=384x443&amp;lossy=2&amp;strip=1&amp;webp=1 384w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-2.png?size=512x591&amp;lossy=2&amp;strip=1&amp;webp=1 512w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 645px; --smush-placeholder-aspect-ratio: 645\/744;\" data-original-sizes=\"(max-width: 645px) 100vw, 645px\"><\/p>\n<p>On your device or simulator, you should see this.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2508 mb-2 lazyload\" data-src=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-text-demo-1.png?lossy=2&strip=1&webp=1\" alt=\"flutter-widgets-text-demo-1\" width=\"247\" height=\"106\" title=\"\" data-srcset=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-text-demo-1.png?lossy=2&amp;strip=1&amp;webp=1 247w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-text-demo-1.png?size=128x55&amp;lossy=2&amp;strip=1&amp;webp=1 128w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 247px; --smush-placeholder-aspect-ratio: 247\/106;\" data-original-sizes=\"(max-width: 247px) 100vw, 247px\"><\/p>\n<div class=\"blue-bg-box-small text-align-center mb-4\"><em>Source: Pusher<\/em><\/div>\n<p>Now, you can play around with the size of the font by adding a TextStyle widget to the style property of Text.<\/p>\n<p>In the above code, just replace myWidget () with the below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2506 lazyload\" data-src=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-3.png?lossy=2&strip=1&webp=1\" alt=\"flutter code 3\" width=\"724\" height=\"186\" title=\"\" data-srcset=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-3.png?lossy=2&amp;strip=1&amp;webp=1 724w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-3.png?size=128x33&amp;lossy=2&amp;strip=1&amp;webp=1 128w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-3.png?size=256x66&amp;lossy=2&amp;strip=1&amp;webp=1 256w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-3.png?size=384x99&amp;lossy=2&amp;strip=1&amp;webp=1 384w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-3.png?size=512x132&amp;lossy=2&amp;strip=1&amp;webp=1 512w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-code-3.png?size=640x164&amp;lossy=2&amp;strip=1&amp;webp=1 640w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 724px; --smush-placeholder-aspect-ratio: 724\/186;\" data-original-sizes=\"(max-width: 724px) 100vw, 724px\"><\/p>\n<div class=\"blue-bg-box-small text-align-center mb-4\"><em>Source: Pusher<\/em><\/div>\n<p>And the output on your device should look like this,<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-2509 mb-2 lazyload\" data-src=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-text-demo-3.png?lossy=2&strip=1&webp=1\" alt=\"flutter-widgets-text-demo-3\" width=\"249\" height=\"126\" title=\"\" data-srcset=\"https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-text-demo-3.png?lossy=2&amp;strip=1&amp;webp=1 249w, https:\/\/b4130876.smushcdn.com\/4130876\/wp-content\/uploads\/2019\/12\/flutter-widgets-text-demo-3.png?size=128x65&amp;lossy=2&amp;strip=1&amp;webp=1 128w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 249px; --smush-placeholder-aspect-ratio: 249\/126;\" data-original-sizes=\"(max-width: 249px) 100vw, 249px\"><\/p>\n<p>The TextStyle widget enables you to change a lot of other properties of Text like font, color, shadows, spacing etc.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"over-to-you\"><\/span>Over to You<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>These were just a couple of Flutter widget examples that we tried out here. As a budding <a title=\"Flutter app developer\" href=\"https:\/\/eluminoustechnologies.com\/hire-developers\/flutter\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter app developer<\/strong><\/a>, there are plenty of sources to help you learn about and experiment with Flutter widgets. The <a href=\"https:\/\/flutter.dev\/docs\/reference\/widgets\" target=\"_blank\" rel=\"nofollow noopener\">official Flutter widget catalog<\/a> is a huge resource and offers an excellent starting point. You\u2019ll also find scores of Github Flutter widget repositories that you can use to understand how widgets work in Flutter.<\/p>\n<p>Widgets are central to the <a title=\"Flutter app development\" href=\"https:\/\/eluminoustechnologies.com\/hire-developers\/flutter\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter app development<\/strong><\/a> process. By learning to create and experiment with widgets, you can develop a UI for your Flutter app that\u2019s not only beautiful but also highly intuitive and functional.<\/p>\n<p>Did you find this Flutter widget guide useful? Which aspect of Flutter widgets do you like the most? Do let us know your thoughts in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a mobile app development framework, Flutter has many things going for it. It\u2019s easy to learn, reduces costs of developing multi-platform apps, has growing&#8230;<\/p>\n","protected":false},"author":7,"featured_media":2503,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[91],"tags":[235,234,236,237,238],"class_list":["post-2501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-apps","tag-flutter-app-developer","tag-flutter-app-development","tag-how-to-build-flutter-widget","tag-mobile-app-development","tag-mobile-application-development-company"],"acf":[],"_links":{"self":[{"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/2501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=2501"}],"version-history":[{"count":4,"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/2501\/revisions"}],"predecessor-version":[{"id":24299,"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/2501\/revisions\/24299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/media\/2503"}],"wp:attachment":[{"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=2501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=2501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eluminoustechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=2501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}