What is a Widget in Flutter? What is a Widget in Flutter? flutter flutter

What is a Widget in Flutter?


Widgets aren't the equivalent of WebComponents. Nor they are UI elements either.

Widgets are high level objects used to describe any part of an application. It can be but is not limited to UI elements such as buttons ; layout (alignment, padding, ...) ; data (a theme, configurations) ...

Widgets can be everything. In flutter, almost everything you'll code will be inside a Widget. Even things like "redux reducers" are widgets in flutter.

In a sense, widgets are extremely similar to React components.

In the end think of widgets as something that describe your application.


But what widgets are not then ?

Widgets don't do any computation. They delegate that computation to other objects.

A widget can't render something on screen for example. Instead it delegate that to RenderObject by using it's internal method createRenderObject.

Just for information, in the web world a RenderObject typically is a DOM element or your web components (since they are custom DOM elements).


Since they delegate everything to other object, do I really need them ?

You don't need them. But you should them. You could make a flutter application using directly RenderObject. Your app will most likely be faster.

But widgets are designed in a way to make your application much more expressive, modular, and maintainable.

Widgets typically introduce the Reactive/Functional programming pattern on the top of other objects. Combined with a much nicer API to use these lower level objects.


The strict definition of WebComponent differs a little bit wherever you look, but basically it boils down (in my own words) to "a set of standards which allow definition of custom, encapsulated, re-usable elements in the form of html tags".

Flutter's strict definition of a widget is:

Describes the configuration for an Element

and Element is defined as:

An instantiation of a Widget at a particular location in the tree

However, when you're speaking about WebComponents, you're probably thinking about the "custom, encapsulated, re-usable elements" rather than the strict definition.

When you start thinking about them this way, flutter's Widget becomes quite similar. When you define a widget (by extending one of the widget classes) you can allow for certain inputs, and you define how it will be displayed. You can more or less use a widget without knowing how it works internally, so long as you know the 'interface' you've been given to it. And when you instantiate it you create an instance of the widget that Flutter is choosing to call an Element. The Widget sounds eerily similar to a WebComponent Element!

Futhermore, when you create a Widget in Flutter, you can encapsulate other widgets so that you don't have to write the visual definition from scratch (Flutter uses RenderObject to represent the rendering whereas the WebComponents analogue would be writing plain html5 without other elements). Flutter includes many widgets such as Buttons, Lists, Containers, Grids, etc that are similar to what you would find in various WebComponent libraries (e.g. Polymer's iron set of components).

There are a few extra wrinkles to Flutter's definition of Widget - they have various types including InheritedWidget, StatefulWidget, StatelessWidget (and a few more specialized), each of which has their own usage; in some ways Flutter's components are actually closer to React's components than WebComponents (and in fact the design of flutter is based from the same reactive ideals). This 'reative'-ness is the biggest difference between flutter Widgets and WebComponent elemnts - they primarily work by passing state down the tree while WebComponent elements would be more likely to have methods that your widget can call on its sub-element, and changes are propagated down the tree by the way your widgets are defined rather than having to call functions.

Not every flutter Widget has to have a visual definition (not that all WebComponents have a visual definition either). InheritedWidget for example is used for essentially leap-frogging state down the tree of widgets without having to actually pass the information down through each layer - it's used for sharing the ThemeData throughout an app. And without getting too much into the gory details, flutter is optimized for primarily building immutable widgets when things change rather than re-using and modifying existing widgets.

The TLDR of this though is that yes, widgets in flutter 'something like' WebComponent elements, with some caveats. You will be writing your application mostly in the form of a set of widgets, some of which encapsulate other ones. And the way that Flutter works is that it uses its own cross-platform renderer (Skia) which lives in the corresponding visual container for android or iOS (Activity and I believe UIView (controller?)) - so you never switch from activity to activity or UIViewController to UIViewController on the native android/iOS side.


Looks like flutter has a bit of documentation about this: flutter docs

In essence it appears that a widget is a way to describe the configuration of an Element. The documentation on Elements circles back to the notion of a widget a fair bit.

At a cursory glance, to me it seems like an Element is synonymous with a general view. Seems like it’s using web terminology.