EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials Web Development Tutorial Flutter Widgets
Secondary Sidebar
Web Development Tutorial
  • Basics
    • App Development Tool
    • Career In Web Development
    • Python and Django for Web Development
    • 10 Web Development Tools
    • Web Design and Development
    • Web Development Frameworks
    • Web Development Interview Questions
    • Web Development Software
    • Web Analytics Tools
    • What is Software Development
    • Drupal Web Development
    • What is Methodology
    • Website Design Layout
    • Web Designing Software for beginners
    • Web Design Tools
    • Graphic Designer Assistant
    • Online Website Builder (Guide)
    • Best Web Analytics Tools
    • Free Web Page Designing Software
    • Website Services
    • Web Designing Tools
    • Website Developer Tools and Resources
    • Web Page Design Layout
    • Features of Effective Web Designer Portfolio
    • Types of Portfolio
    • Website Architecture Diagramming Tools
    • About Before Launching your Website
    • 5 Website Setup Mistakes
    • Best Web Design Trends
    • Web Performance Testing
    • What is Back End Developer
    • What is Front End Developer
    • Errors In Website
    • Web Analytics Tools to Work for You (Guide)
    • Web Design Interview Questions
    • Weblogic Interview Questions
    • Web Technology Interview Questions
    • What is Web Application
    • Full-Stack Web Developer
    • What is UI Designer
    • Ubuntu Command
    • WoeUSB Ubuntu
    • Uses Of WordPress
    • WordPress Website
    • WordPress Work
    • What is WIX
    • Flutter Applications
    • Application Architecture
    • Application Monitoring Tools
    • Flutter Version
    • Flutter Widgets
    • What is WWW?
    • What is Windows?
    • What is Chatbot?
    • Chatbot Software
    • What is Website?
    • Application layer attacks
    • Chatbot Uses
    • Google Development Tools
    • SharePoint Version
    • WWW Architecture
    • Autodesk Careers
    • SSIS Conditional Split
    • Gulp Install
    • Gulp Uglify
    • Gulp Command
    • MVVM Design Pattern
    • Web Development Professional
    • Web Application Security
    • WordPress eCommerce

Related Courses

Software Development Course Training

Java Web Services Training Course

Python Training Course

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

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,130 ratings)

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?
Popular Course in this category
All in One Software Development Bundle (600+ Courses, 50+ projects)
  600+ Online Courses |  3000+ Hours |  Verifiable Certificates |  Lifetime Access
4.6
Price

View Course

Related Courses

JWS Java Web Services Training (4 Courses, 11 Projects)4.9
Python Certifications Training Program (40 Courses, 13+ Projects)4.8
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more