{"id":2740,"date":"2024-07-05T04:42:37","date_gmt":"2024-07-05T04:42:37","guid":{"rendered":"https:\/\/aharnish.com\/blog\/?p=2740"},"modified":"2024-07-11T09:04:04","modified_gmt":"2024-07-11T09:04:04","slug":"what-are-widgets-in-flutter","status":"publish","type":"post","link":"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter","title":{"rendered":"What are Widgets in Flutter?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction_to_Flutter_Widgets\"><\/span>Introduction to Flutter Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2><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<label for=\"ez-toc-cssicon-toggle-item-69e1978820002\" class=\"ez-toc-cssicon-toggle-label\"><p class=\"ez-toc-title\">Table of Contents<\/p>\n<span class=\"ez-toc-cssicon\"><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><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e1978820002\"  \/><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=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Introduction_to_Flutter_Widgets\" title=\"Introduction to Flutter Widgets\">Introduction to 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=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Definition_of_Widgets\" title=\"Definition of Widgets\">Definition of Widgets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Types_of_Widgets_in_Flutter\" title=\"Types of Widgets in Flutter\">Types of Widgets in Flutter<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Example_of_a_Stateless_Widget\" title=\"Example of a Stateless Widget\">Example of a Stateless Widget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Example_of_a_Stateful_Widget\" title=\"Example of a Stateful Widget\">Example of a Stateful Widget<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Widget_Tree_in_Flutter\" title=\"Widget Tree in Flutter\">Widget Tree in Flutter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Key_Concepts_in_Flutter_Widgets\" title=\"Key Concepts in Flutter Widgets\">Key Concepts in Flutter Widgets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Common_Flutter_Widgets\" title=\"Common Flutter Widgets\">Common Flutter Widgets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Creating_Custom_Widgets\" title=\"Creating Custom Widgets\">Creating Custom Widgets<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Example_of_a_Custom_Widget\" title=\"Example of a Custom Widget\">Example of a Custom Widget<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Best_Practices_for_Working_with_Widgets\" title=\"Best Practices for Working with Widgets\">Best Practices for Working with Widgets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/aharnish.com\/blog\/flutter\/what-are-widgets-in-flutter\/#Next_Steps\" title=\"Next Steps\">Next Steps<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<p>In Flutter, widgets are the fundamental building blocks of user interfaces. They are the core elements that you combine to create the visual structure and interactive components of your application. Understanding widgets is crucial for any Flutter developer, as they form the foundation of Flutter&#8217;s declarative UI paradigm.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Definition_of_Widgets\"><\/span>Definition of Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A widget in Flutter is a description of part of a user interface. It can represent:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Structural elements (like containers or rows)<\/li>\n\n\n\n<li>Stylistic elements (like fonts or colour schemes)<\/li>\n\n\n\n<li>Layout aspects (like padding or alignment)<\/li>\n\n\n\n<li>Interactive components (like buttons or sliders)<\/li>\n<\/ol>\n\n\n\n<p>Every element you see and interact with in a Flutter app is a widget or a combination of widgets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Types_of_Widgets_in_Flutter\"><\/span>Types of Widgets in Flutter<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Flutter widgets can be broadly categorised into two main types.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Stateless Widgets<\/strong>: These are immutable. Once built, their properties cannot change. They are used for parts of the UI that don&#8217;t need to change dynamically.<\/li>\n\n\n\n<li><strong>Stateful Widgets<\/strong>: These can change their appearance in response to events triggered by user interactions or when they receive data.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_of_a_Stateless_Widget\"><\/span>Example of a Stateless Widget<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#33384d;color:#aaafcf\">Dart<\/span><span role=\"button\" tabindex=\"0\" data-code=\"class WelcomeMessage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Text('Welcome to Flutter!');\n  }\n}\n\n\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-palenight\" style=\"background-color: #292D3E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">class<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">WelcomeMessage<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">extends<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">StatelessWidget<\/span><span style=\"color: #BABED8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #C792EA\">@override<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #FFCB6B\">Widget<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">build<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #FFCB6B\">BuildContext<\/span><span style=\"color: #BABED8\"> context) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">Text<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #C3E88D\">&#39;Welcome to Flutter!&#39;<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_of_a_Stateful_Widget\"><\/span>Example of a Stateful Widget<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#33384d;color:#aaafcf\">Dart<\/span><span role=\"button\" tabindex=\"0\" data-code=\"class Counter extends StatefulWidget {\n  @override\n  _CounterState createState() =&gt; _CounterState();\n}\n\nclass _CounterState extends State<Counter&gt; {\n  int _count = 0;\n\n  void _incrementCounter() {\n    setState(() {\n      _count++;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      children: <Widget&gt;[\n        Text('Count: $_count'),\n        ElevatedButton(\n          onPressed: _incrementCounter,\n          child: Text('Increment'),\n        ),\n      ],\n    );\n  }\n}\n\n\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-palenight\" style=\"background-color: #292D3E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">class<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">Counter<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">extends<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">StatefulWidget<\/span><span style=\"color: #BABED8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #C792EA\">@override<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #FFCB6B\">_CounterState<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">createState<\/span><span style=\"color: #BABED8\">() <\/span><span style=\"color: #89DDFF\">=&gt;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">_CounterState<\/span><span style=\"color: #BABED8\">()<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">class<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">_CounterState<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">extends<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">State<\/span><span style=\"color: #BABED8\">&lt;<\/span><span style=\"color: #FFCB6B\">Counter<\/span><span style=\"color: #BABED8\">&gt; {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #FFCB6B\">int<\/span><span style=\"color: #BABED8\"> _count <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">0<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #C792EA\">void<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">_incrementCounter<\/span><span style=\"color: #BABED8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #82AAFF\">setState<\/span><span style=\"color: #BABED8\">(() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      _count<\/span><span style=\"color: #89DDFF\">++;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    })<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #C792EA\">@override<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #FFCB6B\">Widget<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">build<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #FFCB6B\">BuildContext<\/span><span style=\"color: #BABED8\"> context) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">Column<\/span><span style=\"color: #BABED8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      children<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #FFCB6B\">Widget<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">[<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #FFCB6B\">Text<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #C3E88D\">&#39;Count: $<\/span><span style=\"color: #BABED8; font-style: italic\">_count<\/span><span style=\"color: #C3E88D\">&#39;<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        <\/span><span style=\"color: #FFCB6B\">ElevatedButton<\/span><span style=\"color: #BABED8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">          onPressed<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> _incrementCounter<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">          child<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">Text<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #C3E88D\">&#39;Increment&#39;<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        )<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      ]<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Widget_Tree_in_Flutter\"><\/span>Widget Tree in Flutter<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Widgets in Flutter are arranged in a tree-like structure, known as the widget tree. This hierarchical arrangement defines the layout and composition of the user interface.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/aharnish.com\/blog\/wp-content\/uploads\/2024\/07\/counter-widget-tree-diagram-1024x768.webp\" alt=\"Flutter widget tree hierarchical structure\" class=\"wp-image-2741\" srcset=\"https:\/\/aharnish.com\/blog\/wp-content\/uploads\/2024\/07\/counter-widget-tree-diagram-1024x768.webp 1024w, https:\/\/aharnish.com\/blog\/wp-content\/uploads\/2024\/07\/counter-widget-tree-diagram-300x225.webp 300w, https:\/\/aharnish.com\/blog\/wp-content\/uploads\/2024\/07\/counter-widget-tree-diagram-768x576.webp 768w, https:\/\/aharnish.com\/blog\/wp-content\/uploads\/2024\/07\/counter-widget-tree-diagram.webp 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Figure 1: Detailed Flutter Widget Tree Hierarchy<\/p>\n\n\n\n<p>This diagram illustrates a more complex widget tree, showing how different types of widgets (Stateless, Stateful, and built-in widgets) are nested to create a complete UI.<\/p>\n\n\n\n<p><strong>Here&#8217;s a breakdown of the tree structure<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>At the top, we have the <code>Counter<\/code> widget, which is a <code>StatefulWidget<\/code>.<\/li>\n\n\n\n<li>Below that is the <code>_CounterState<\/code>, which is created by the <code>Counter<\/code> widget and manages the state.<\/li>\n\n\n\n<li>The <code>build<\/code> method of <code>_CounterState<\/code> returns a <code>Column<\/code> widget.<\/li>\n\n\n\n<li>Inside the <code>Column<\/code>, we have two child widgets:\n<ul class=\"wp-block-list\">\n<li>A <code>Text<\/code> widget that displays the current count.<\/li>\n\n\n\n<li>An <code>ElevatedButton<\/code> widget that, when pressed, increments the counter.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>This tree structure visualizes how the widgets are nested and relate to each other in your Flutter application. The <code>_CounterState<\/code> is responsible for managing the <code>_count<\/code> variable and updating it when the button is pressed, which then causes the <code>Text<\/code> widget to update and display the new count.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Key_Concepts_in_Flutter_Widgets\"><\/span>Key Concepts in Flutter Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Composition<\/strong>: Widgets are composed together to build complex UIs from simpler components.<\/li>\n\n\n\n<li><strong>Inheritance<\/strong>: Widgets often inherit from more general widget classes, forming a hierarchy.<\/li>\n\n\n\n<li><strong>Configuration<\/strong>: Widgets are configured using parameters passed to their constructors.<\/li>\n\n\n\n<li><strong>Building<\/strong>: The <code>build<\/code> method describes how to display a widget given its current configuration and state.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Flutter_Widgets\"><\/span>Common Flutter Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/aharnish.com\/blog\/flutter\/what-is-flutter\">Flutter<\/a> provides a rich set of pre-built widgets. Here are some of the most commonly used.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Layout Widgets<\/strong>:\n<ul class=\"wp-block-list\">\n<li><code>Container<\/code>: A convenience widget that combines common painting, positioning, and sizing widgets.<\/li>\n\n\n\n<li><code>Row<\/code> and <code>Column<\/code>: For creating horizontal and vertical layouts.<\/li>\n\n\n\n<li><code>Stack<\/code>: For overlaying widgets on top of each other.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Content Widgets<\/strong>:\n<ul class=\"wp-block-list\">\n<li><code>Text<\/code>: For displaying text.<\/li>\n\n\n\n<li><code>Image<\/code>: For showing images.<\/li>\n\n\n\n<li><code>Icon<\/code>: For displaying icons.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Input Widgets<\/strong>:\n<ul class=\"wp-block-list\">\n<li><code>TextField<\/code>: For text input.<\/li>\n\n\n\n<li><code>Checkbox<\/code>, <code>Radio<\/code>, <code>Slider<\/code>: For different types of user input.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Information Displays<\/strong>:\n<ul class=\"wp-block-list\">\n<li><code>AlertDialog<\/code>: For showing alerts.<\/li>\n\n\n\n<li><code>SnackBar<\/code>: For displaying brief messages.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_Custom_Widgets\"><\/span>Creating Custom Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>While Flutter provides many built-in widgets, you&#8217;ll often need to create custom widgets for your specific app requirements. Custom widgets are typically created by.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Composing existing widgets in new ways.<\/li>\n\n\n\n<li>Extending <code>StatelessWidget<\/code> or <code>StatefulWidget<\/code> classes.<\/li>\n\n\n\n<li>Implementing the <code>build<\/code> method to define the widget&#8217;s structure and appearance.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_of_a_Custom_Widget\"><\/span>Example of a Custom Widget<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#33384d;color:#aaafcf\">Dart<\/span><span role=\"button\" tabindex=\"0\" data-code=\"class CustomButton extends StatelessWidget {\n  final String text;\n  final VoidCallback onPressed;\n\n  CustomButton({required this.text, required this.onPressed});\n\n  @override\n  Widget build(BuildContext context) {\n    return ElevatedButton(\n      child: Text(text),\n      onPressed: onPressed,\n      style: ElevatedButton.styleFrom(\n        primary: Colors.blue,\n        onPrimary: Colors.white,\n        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),\n      ),\n    );\n  }\n}\n\n\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-palenight\" style=\"background-color: #292D3E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">class<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">CustomButton<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">extends<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">StatelessWidget<\/span><span style=\"color: #BABED8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #C792EA\">final<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">String<\/span><span style=\"color: #BABED8\"> text<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #C792EA\">final<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">VoidCallback<\/span><span style=\"color: #BABED8\"> onPressed<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #FFCB6B\">CustomButton<\/span><span style=\"color: #BABED8\">({<\/span><span style=\"color: #C792EA\">required<\/span><span style=\"color: #BABED8\"> this<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">text<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">required<\/span><span style=\"color: #BABED8\"> this<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">onPressed})<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #C792EA\">@override<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #FFCB6B\">Widget<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">build<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #FFCB6B\">BuildContext<\/span><span style=\"color: #BABED8\"> context) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">ElevatedButton<\/span><span style=\"color: #BABED8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      child<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">Text<\/span><span style=\"color: #BABED8\">(text)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      onPressed<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> onPressed<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      style<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">ElevatedButton<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">styleFrom<\/span><span style=\"color: #BABED8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        primary<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">Colors<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">blue<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        onPrimary<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">Colors<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">white<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">        padding<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">EdgeInsets<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">symmetric<\/span><span style=\"color: #BABED8\">(horizontal<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">20<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> vertical<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">10<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">      )<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    )<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Best_Practices_for_Working_with_Widgets\"><\/span>Best Practices for Working with Widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Keep widgets small and focused on a single purpose.<\/li>\n\n\n\n<li>Use <code>const<\/code> constructors when possible to improve performance.<\/li>\n\n\n\n<li>Prefer composition over inheritance when creating custom widgets.<\/li>\n\n\n\n<li>Use named parameters in widget constructors for better readability.<\/li>\n\n\n\n<li>Leverage Flutter&#8217;s built-in widgets before creating custom ones.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Widgets are the cornerstone of Flutter development. They provide a powerful, flexible way to build user interfaces that are both beautiful and performant. As you continue your journey in Flutter development, you&#8217;ll discover the full potential of widgets in creating responsive, adaptive, and engaging mobile applications.<\/p>\n\n\n\n<p>By mastering widgets, you&#8217;ll be able to translate your design ideas into functional, aesthetically pleasing Flutter apps. Remember, practice is key \u2013 experiment with different widgets, combine them in various ways and don&#8217;t hesitate to create custom widgets to meet your specific needs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Next_Steps\"><\/span>Next Steps<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To deepen your understanding of Flutter widgets.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Experiment with different built-in widgets in the Flutter framework.<\/li>\n\n\n\n<li>Practice creating custom widgets for specific use cases.<\/li>\n\n\n\n<li>Explore more complex widget compositions and layouts.<\/li>\n\n\n\n<li>Study how state management affects widget behaviour and performance.<\/li>\n\n\n\n<li>Dive into the Flutter documentation to discover more advanced widget concepts and techniques.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to Flutter Widgets In Flutter, widgets are the fundamental building blocks of user interfaces. They&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2760,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[8],"tags":[9],"class_list":["post-2740","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter","tag-flutter"],"_links":{"self":[{"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/posts\/2740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/comments?post=2740"}],"version-history":[{"count":2,"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/posts\/2740\/revisions"}],"predecessor-version":[{"id":2752,"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/posts\/2740\/revisions\/2752"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/media\/2760"}],"wp:attachment":[{"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/media?parent=2740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/categories?post=2740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aharnish.com\/blog\/wp-json\/wp\/v2\/tags?post=2740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}