Updated July 1, 2023
Definition of Flutter Widgets
In Flutter, widgets are built using the modern framework. The basic idea behind using the widgets is that programmers can easily create UI from them. Widgets describe how the UI of the application would look in the given state and configuration. In Flutter, runApp() function is used, which takes the Widget and makes it a root in the Widget tree. Widgets are easy to use and understand, especially for newbies, so creating the application’s UI becomes simple for them. Flutter provides a list of widgets to the user for specific purposes like Container, text, Stack, Scaffold, row, column, AppBar, logo, Icons, etc.
List of Flutter Widgets
Though there are many widgets. Some of the important yet basic widgets of Flutter are given below:
1. Container
The Container widgets first add the padding to surround the child. It basically helps to create a rectangular visual element. Any constraints, such as height and width, are then applied to the padded child. One can apply the background, shadow, border, etc to the Container using BoxDecoration. Margin, padding, and other constraints can be applied to the Container, affecting its size.
Below given is the syntax of the constructor of Container:
AlignmentGeometry ali,
EdgeInsetsGeometry pad,
Color clr,
Decoration dec,
Decoration foreDec,
double width,
double ht,
BoxConstraints cons,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child,
Clip clipBehavior: Clip.none});The following are the properties of Container widgets:
- Margin
- Color
- Child
- Height and width
- Constraints
- Padding
- Alignment
- Decoration
- Transform
2. Column
This widget helps to create a flexible layout. As the name suggests, a column displays the children in the vertical format. It is one of the most important widgets used in creating the UI in Flutter.
Below given is the syntax for using the Column widget in Flutter:
Column(
{Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection td,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline textbase,
List<Widget> children: const <Widget>[]}
)Following are the properties of the Column widget in Flutter:
- verticalDirection
- textDirection
- textBaseline
- children
- clipBehavior
- direction
- mainAxisSize
- crossAxisAlignment
- mainAxisAlignment
3. Row
Like the Column, the Row widget is also a very flexible widget and is basically used to display the children in the horizontal format. Generally, a row widget does not scroll as it is considered to be an error to have more children than the available space in the case of a Row. Content in the row can be easily aligned using the mainAxisAlignment and crossAxisAlignment as the mainAxis in case the row is horizontal, whereas the crossAxis is vertical.
Below given is the basic syntax of the constructor of the Row widget.
Row(
{Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection td,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline textBaseline: TextBaseline.alphabetic,
List<Widget> children: const <Widget>[]}
)Following are the various properties of the Row widget in Flutter. Properties for the Row and Column remain the same in Flutter:
- verticalDirection
- textDirection
- textBaseline
- children
- clipBehavior
- direction
- mainAxisSize
- crossAxisAlignment
- mainAxisAlignment
4. Text
As the name suggests, the Text widget in Flutter displays the string with a single line. Programmers can display the string by breaking it into multiple lines or can display it in a single line depending on the layout constraints. If the programmer does not specify any text style, the closest DefaultTextStyle is chosen by default.
Below given is the basic syntax of Text Constructor in Flutter:
const Text(String data,{
Key key,
TextStyle sty,
StrutStyle strutSty,
TextAlign txtAlign,
TextDirection td,
TextOverflow over,
bool softWrap,
double textScaleFactor,
int maxLines,
String semanticsLabel,
TextWidthBasis textWidthBasis,
TextHeightBehavior txtHght
}
)Following are the properties of the Text widget in Flutter:
- key
- Locale
- maxLines
- Data
- overflow
- maxLines
- softWrap
- textAlign
- style
- textSpan
- textWidthBasis
- textScaleFactor
5. Flutter Logo
The Flutter logo is also in the widget form. It respects the Icon theme. Basically, the base class of Flutter Logo is the Object class.
Below given is the syntax of the Flutter logo constructor:
FlutterLogo({
Key key,
double size,
Color textColor: const Color(0xFF757556),
FlutterLogoStyle style: FlutterLogoStyle.markOnly,
Duration duration: const Duration(milliseconds: 890),
Curve curve: Curves.fastOutSlowIn
})Following are the properties of the Flutter logo used frequently by the programmers:
- key
- size
- style
- duration
- curve
- hashCode
- textColor
- runtime
6. Image
As the name suggests, this widget is used to specify the image in the Flutter application. One can use different constructors to specify the image in various ways. Image formats .jpg, .jpeg, png, bmp, wbmp, webP, etc are supported in Flutter. Image in Flutter is painted with paintImage, which specifies the meaning of various fields.
Below given is the syntax of the basic Image constructor used in Flutter:
Image({
Key key, @required ImageProvider<Object> image,
ImageFrameBuilder frameBuild,
ImageLoadingBuilder loadingBuild,
ImageErrorWidgetBuilder errorBuild,
String semanticLabel,
bool excludeFromSemantics: false,
double wi,
double ht,
Color clr,
BlendMode colorBlend,
BoxFit fit,
AlignmentGeometry alignment: Alignment.center,
ImageRepeat repeat: ImageRepeat.noRepeat,
Rect centerSlice,
bool matchTextDirection: false, bool gaplessPlayback: false,
bool isAntiAlias: false,
FilterQuality filterQuality: FilterQuality.low
})The following are the properties of the Image widget in Flutter:
- color
- errorBuilder
- Alignment
- filterQuality
- centerSlice
- fit
- frameBuilder
- height
- image
- key
- loadingBuilder
- repeat
- matchTextDirection
- width
7. Placeholder
This widget is one of the most useful widgets while in the development phase of the application. It draws a box to represent where other widgets should be placed. In Flutter, the placeholder is sized to fit its container by default. Placeholder will size itself according to fallbackWidth and fallbackHeight if it is in unbounded space.
Below given is the syntax of the Placeholder constructor in Flutter:
Placeholder({
Key key,
Color color: const Color(0x0000ff),
double strokeWidth: 7.0,
double fallbackWidth: 600.0,
double fallbackHeight: 800.0
})Following are the properties of the Placeholder widget in Flutter:
- color
- key
- runtimeType
- fallbackHeight
- fallbackWidth
- strokeWidth
8. AppBar
AppBar in Flutter displays the toolbar widgets like leading, title, and actions. It contains widgets like TabBar and FlexibleSpaceBar. Based on the ambient, AppBar inserts its content to avoid UI intrusions.
Below given is the basic syntax of AppBar constructor in Flutter:
AppBar({
Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
Widget flexibleSpace,
PreferredSizeWidget bottom,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
bool primary: true,
bool centerTitle,
bool excludeHeaderSemantics: false,
double titleSpacing: NavigationToolbar.kMiddleSpacing,
double toolbarOpacity: 1.0,
double bottomOpacity: 1.0,
double toolbarHeight,
double leadingWidth
})Following are some of the properties of the AppBar widget:
- brightness
- bottom
- backgroundColor
- actionsIconTheme
- bottomOpacity
- elevation
- centerTitle
- hashCode
- key
- leading
- shape
- textTheme
Conclusion
The above description clearly explains the various commonly used widgets in Flutter. Since Flutter is trending these days to build the UI, before creating any application in Flutter, programmers need to have in-depth knowledge of these widgets and the constructors, methods, and their properties.
Recommended Articles
This is a guide to Flutter Widgets. Here we discuss Flutter Widgets’ Definition, syntax, lists, and properties. You can also go through our other suggested articles to learn more –
