Components of a Material

Widgets

Made by : Mr. Mohsin Raza Khan

 Material Components widgets
• App structure and navigation

• Buttons

• Input and selections

• Dialogs, alerts, and panels

• Information displays

• Layout
 Drawer class
• Drawers are typically used with the Scaffold.drawer property.

• he child of the drawer is usually a ListView whose first child is

a DrawerHeader that displays status information about the current user.

• The AppBar automatically displays an appropriate IconButton to show

the Drawer when a Drawer is available in the Scaffold.
Container
• Container class in flutter is a convenience widget that combines common
painting, positioning, and sizing of widgets.

• A Container class can be used to store one or more widgets and position
them on the screen according to our convenience. Basically, a container is
like a box to store contents.
Container
Container
1. child: Container widget has a property ‘child:’ which stores its
children. The child class can be any widget. Let us take an example,
taking a text widget as a child.
Container
Container
2. color: The color property sets the background color of the entire
container. Now we can visualize the position of the container using a
background color.
Container
3. height and width: By default, a container class takes the space that is
required by the child. We can also specify the height and width of the
container based on our requirements.
Container
4. margin: The margin is used to create an empty space around the
container. Observe the white space around the container. Here Edge
Insets. geometry is used to set the margin .all() indicates that the
margin is present in all four directions equally.
Container
5. padding: The padding is used to give space form the border of the
container form its children. Observe the space between the border and
the text.
Container
6. alignment: The alignment is used to position the child within the
container. We can align in different ways: bottom, bottom center, left,
right, etc. here the child is aligned to the bottom center.
Container
7. decoration: The decoration property is used to decorate the box(e.g.
give a border). This paints behind the child. Whereas foreground
Decoration paints in front of a child. Let us give a border to the
container. But, both color and border color cannot be given.
Center widget in Flutter
Center widget comes built-in with flutter, it aligns its child widget to
the center of the available space on the screen. The size of this widget
will be as big as possible if the widthFactor and heightFactor properties
are set to null and the dimensions are constrained.
Properties of Center Widget:
• widthFactor: This property takes a double value as a parameter and it
sets the Center widget’s width as the same as the child’s width
multiplied by this factor. For example, if it is set to 3.0 then
the Center widget will take three times the size of its child widget.
• heightFactor: This property also takes in a double value as a
parameter and it sets the Center widget’s height as the same as
the child’s height multiplied by this factor.
• child: This property takes in a widget as a parameter to be displayed
inside the Center widget on the screen.
• alignment: This property takes in Alignment Geometry as the
parameter value to determine how the child widget will be aligned
with respect to the Center widget.
Example Code
Sample Output
Flutter Text
• A Text is a widget in Flutter that allows us to display a string of text
with a single line in our application.

• If we do not specify any styling to the text widget, it will use the
closest DefaultTextStyle class style.

• The text can be customized with different properties like fontsize,

fontfamily, fontweight, color etc.
Flutter Text
Flutter Text Widget Properties
• The text widget has many properties for styling and aligning the text.
Let’s see each property with an example in detail. Let’s see the
properties list below.

1. style
2. textAlign
3. textDirection
4. softWrap
5. overflow
6. textScaleFactor
7. maxlines
 style
1. color
2. fontSize
3. fontWeight
4. fontStyle
5. letterSpacing
6. wordSpacing
7. height
8. foreground
9. background
10. shadows
11. decoration
12. decorationColor
13. decorationStyle
14. fontFamily
style
Flutter Buttons
• Buttons are the graphical control element that provides a user to trigger an
event such as taking actions, making choices, searching things, and many more.
They can be placed anywhere in our UI like dialogs, forms, cards, toolbars, etc.
Types of Flutter Buttons
• Flat Button (Text Button)
• Raised Button (Elevated Button)
• Floating Button
• Drop Down Button
• Icon Button
• Inkwell Button
• PopupMenu Button
• Outline Button
Flat Button (Text Button)
Flutter Row and Column
• The rows and columns are not a single widget; they are two different
widgets, namely Row and Column.

• Row and column are the two essential widgets in Flutter that allows
developers to align children horizontally and vertically according to
our needs.

• These widgets are very necessary when we design the application

user interface in Flutter.
Key Points
• Row and Column widgets are the most commonly used layout
patterns in the Flutter application.

• Both may take several child widgets.

• A child widget can also be a row or column widget.

• Flutter also allows developers to specify how child widgets can use
row and column widgets' available space.
Flutter Row and Column
Flutter Row and Column
Flutter Row and Column
Flutter Row and Column
Flutter Row and Column
 Sized Box Widget
• SizedBox is a built-in widget in flutter SDK. It is a simple box with a
specified size. It can be used to set size constraints to the child
widget, put an empty SizedBox between the two widgets to get some
space in between, or something else. It is somewhat similar to a
Container widget with fewer properties.
 Sized Box Widget
• Properties of SizedBox Widget:
Sized Box Widget Example
 Expanded Widget
• Expanded widget in flutter comes in handy when we want a child
widget or children widgets to take all the available space along the
main-axis (for Row the main axis is horizontal & vertical for Column).

• Expanded widget can be taken as the child of Row, Column, and Flex.
And in case if we don’t want to give equal spaces to our children
widgets we can distribute the available space as our will
using flex factor.
Expanded Widget
Expanded Widget
Expanded Widget
THANK YOU