Widget in flutter

Everything we see in UI is a widget in Flutter.
The whole UI is a tree of widgets.
When building a mobile app, We’ll usually implement certain widgets for the base structure.

The List Of basic widgets of flutter


The Scaf­ fold widget implements the basic Material Design visual layout, allowing you to easily add various widgets such as AppBar, BottomAppBar, FloatingActionButton, Drawer, Snack­ Bar, BottomSheet, and more.


The AppBar widget usually contains the standard title, toolbar, leading, and actions properties (along with buttons), as well as many customization options.


The title property is typically implemented with a Text widget. You can customize it with other widgets such as a DropdownButton widget.


The leading property displayed before the title property. Usually, this is an IconButton or BackButton.


The actions property displayed to the right of the title property. It’s a list of widgets aligned to the upper right of an AppBar widget usually with an IconButton or PopupMenuButton.


The flexibleSpace property stacked behind the Toolbar or TabBar widget. The height is usually the same as the AppBar widget’s height. A background image commonly applied to the flexibleSpace property, but any widget, such as an Icon, could be used.


The SafeArea widget is necessary for today’s devices such as the iPhone X or Android devices with a notch (a partial cut-out obscuring the screen usually located on
the top portion of the device). The SafeArea widget automatically adds sufficient padding to the child widget to avoid intrusions by the operating system. You can optionally pass a minimum amount of padding or a Boolean value to not enforce padding on the top, bottom, left, or right.


The Container widget is commonly used to customize its child widget. You can easily add properties such as color, width, height, padding, margin, border, constraint, alignment, transform (such as rotating or sizing the widget), and many others.


The Text widget displays a string of characters. The Text constructor takes the arguments string, style, maxLines, overflow, textAlign, and others.


The RichText widget is a great way to display text using multiple styles. The RichText widget takes TextSpans as children to style different parts of the strings.


A Column widget displays its children vertically. It takes a children property con- taining an array of List<Widget>, meaning you can add multiple widgets. The children align vertically without taking up the full height of the screen.


A Row widget displays its children horizontally. It takes a children property containing an array of List<Widget>.


There are a variety of buttons to choose from for different situations such as RaisedButton, FloatingActionButton, FlatButton, IconButton, PopupMenuButton, and ButtonBar.

More flutter tutorial
Find us on Facebook, Linkedin

Leave a Reply

Your email address will not be published.