EDUCBA

Home Software Development Software Development Tutorials Web Development Tutorial Flutter Widgets

Flutter Widgets

By Yashi GoyalYashi Goyal

Flutter Widgets

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 like on the given state and configuration. In Flutter, runApp() function is used which takes the Widget and makes it as a root in the Widget tree. Widgets are easy to use and understand especially for the newbies, so creating the UI of the application 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:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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 which affects 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});

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 is used to display 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 of 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, 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 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 Row widget in Flutter. Properties for the Row and Column remains the same in Flutter:

  • verticalDirection
  • textDirection
  • textBaseline
  • children
  • clipBehavior
  • direction
  • mainAxisSize
  • crossAxisAlignment
  • mainAxisAlignment

4. Text

As the name suggests, Text widget in Flutter is used to display 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 any text style is not specified by the programmer, by default, the closest DefaultTextStyle is chosen.

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 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 IconTheme. Basically, the base class of Flutter Logo is Object class.

Below given is the syntax of 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 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
})

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, 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 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 in order 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 AppBar widget:

  • brightness
  • bottom
  • backgroundColor
  • actionsIconTheme
  • bottomOpacity
  • elevation
  • centerTitle
  • hashCode
  • key
  • leading
  • shape
  • textTheme

Conclusion

Above description clearly explains the various commonly used widgets in Flutter. Since Flutter is trending these days to build the UI but 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 the Definition, syntax, lists, and properties of Flutter Widgets. You can also go through our other suggested articles to learn more –

  1. Flutter Applications
  2. What is Flutter?
  3. React Native vs Flutter
  4. What is Xamarin?
0 Shares
Share
Tweet
Share