In Flutter Every Component Is A Widget

When I was looking up info about Flutter I ready that every component in Flutter is a widget. I didn't quite understand what that meant as I'd never come across that in any other programming language I had programmed in.

What that ultimately means is that every UI elements you build is a widget.

So, to break down that comment, what is meant is the following.

Flutter - what is a widget

Imagine your screen. You have an app bar and you have a list of items. Quite a simple screen but it will do for this example.

So, breaking them down. The AppBar is a widget. This is built containing the toolbar which may consist of a title, menu and so on.

Next, your list of items will probably be a ListView. Yes, you guessed it, the ListView is a widget. This widget possibly is built up with something like ListTiles.

The ListTile is each row in the ListView. The ListTile is a widget. You would build this with some Text. Maybe add an Icon. Add any actions. All this is contained in the ListTile widget.

Each row of the ListView contains it's own ListTile widget with the text, icon and actions.

Just a simple example

So, this is just a simple example of what I believe is meant by every component is a widget. You build up the UI with individual widget components - each building up on or in the upper widget.

These all work together to build the screen. Each screen you create will have a scaffold build and each will have their own widgets. This doesn't mean you can't pass info through routes to other screens; but these lists of info would not be widgets as they won't be screen elements.

Just think that; every screen you see, every element on that screen, in Flutter it is all different widgets built up on top of each other to create the UI you need. Then each widget is styled individually to gain the exact look you want.