Flutter Widgets: Everything is a Widget
Think of Flutter UIs as LEGOs. Every element, from a button to the padding around it, is a self-contained 'widget' you compose to build your screen. This applies to layout, text, and even alignment.
Why it exists
Traditional UI frameworks often separate layout (XML), styling (CSS), and logic (Java/Kotlin). This creates friction and context-switching. Flutter unifies all three into a single, declarative approach using widgets written in one language, Dart, to simplify development.
The mental model
A widget is an immutable blueprint for a part of the user interface. Think of it like a LEGO brick: you don't change a brick, you replace it with a different one. You compose small, single-purpose widgets (like Text, Icon, Padding) inside larger layout widgets (like Row, Column, Stack) to build your entire screen.
How it works
You declare your UI as a tree of widgets. For example, a Row widget might contain an Icon widget and a Text widget. When your app's state changes (e.g., a user taps a button), Flutter efficiently rebuilds the affected parts of the widget tree. It compares the new widget tree to the old one and only updates what's necessary on the screen. This declarative 'UI as code' approach is fast and predictable.
When to use it
Always. Building any UI in Flutter involves composing widgets. This applies to visible elements like buttons and images, layout structures like grids and lists, styling elements like themes and padding, and even interaction handlers like gesture detectors. The principle is 'composition over inheritance'.
When not to use it
You don't use widgets for non-UI logic, such as making network requests or accessing a database. While a widget might trigger these actions, the business logic itself should live outside the widget tree in separate classes or services. This keeps your UI code clean and focused on describing the interface.
One canonical example
A simple 'Follow' button. You might use a Row widget to hold an Icon and a Text widget ('Follow'). You'd wrap this Row in a Padding widget for spacing, and then wrap that in a GestureDetector widget to handle taps. Each part is its own widget, composed together to create the final element.
Interview question
In Flutter's 'everything is a widget' paradigm, which of the following is typically represented as a widget?
- a.The data model class representing a user profile.
- b.The business logic that determines if a user is logged in.
- c.A button's visual appearance, its padding, and its tap handler.Correct
- d.The code responsible for making a network request to an API.
Why? this is the answer
Flutter uses widgets for all UI elements, including visible components, styling (like padding), and interaction handlers. Non-UI logic, such as network requests, data models, or business logic like authentication, should reside outside the widget tree.
Just read this? Test yourself on what you have been reading.
Read the original → docs.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles