What is Widget in flutter ?

Widget is a description of a part of UI.
  • In flutter, Widget is a way to declare and construct UI.
  • If you are familiar with the Android or iOS development then you might make the immediate connection with the views (on Android) or UIViews (on iOS).
  • But dear just like view, Widget is not just a piece of UI. Widget is a lot more than just structural elements like buttons, text, image, list or slider. A widget might display Something, it might help define design, it might help with layout, it may handle user interaction, etc.
  • For example, Padding is a widget, Margin is a widget, Center is a widget, Layout rows and columns are also widgets.
  • So you can consider that a widget is a blueprint. Flutter uses these blueprints to create views.
  • Here also remember that in flutter everything is a widget. Even your app itself is a widget. 😊

Widget tree

  • Widgets are arranged into a tree of parent and child widget.
  • Widgets are nested inside of each other to form your app.
  • The Entire widget tree forms a layout that you see on the screen.

Types of Widgets

  • Flutter has a rich set of in-built widgets like text, buttons, slider, lists, layouts, gesture detector, animations, etc. Flutter team works really hard to create a set of widgets that helps you in almost every situation. And they are continuously adding more widgets as developers needs.
  • But apart from built-in widgets, you can create your own widgets according to your needs.
  • Flutter divides widgets into two categories:
  1. Stateless Widgets
  2. Stateful Widgets

Stateless Widgets

  • Stateless widgets don’t store any state. That means they don’t store values that might change.
  • You can also say that stateless widgets are “DATALESS” widgets. As they don’t store any real-time data.
  • For example, if you have a simple Text widget on the screen, but it doesn’t do anything then its Stateless Widget.
  • Icon, IconButton, and Text are an example of stateless widgets.

Stateful Widgets

  • A Stateful widget is dynamic in nature. That means it can keep track of changes and update the UI based on those changes.
  • The user can interact with a stateful widget. For example, If you press a button and it performs any task its a Stateful Widget, If you are moving a slider and it does anything then its a Stateful Widget, If you swipe item from a list and item gets deleted then that list a Stateful Widget.
  • CheckBox, Radio, Slider, InkWell, Form, and TextField are an example of stateful widgets.
If you are in doubt, then always remember this rule. 😊
  • If a widget changes, it’s a Stateful Widget
  • If a widget is not changing, it’s a Stateless Widget.

Comments

Popular posts from this blog

Auto slide image with indicator in flutter

Flutter Architecture | Flutter - Architecture Application

Automatic Scrolling Image in flutter