Widgets Pt.

2
Covered Topics
• Stack
• IndexStack
• Forms
• AlertDialog
• Card
• Navigation Drawer
• Gesture
Stack
Stack widget contains a list of widgets and positions them on top of the other. It allows developers to overlap
multiple widgets onto a single screen and render them from bottom to top. Hence the first widget is the
bottom most item, and the last widget is the topmost item.
Stack(
children: <Widget>[
// Max Size
Container(
color: [Link],
),
Container(
color: [Link],
),
Container(
color: [Link],
) ],),
Stack Properties
• alignment: how the children widgets are positioned in the stack. It can be top, bottom, center, center-right,
etc.
alignment: [Link],
• textDirection: To determines the txt direction, it can be ltr (left to right), or rtl (right to left)
textDirection: [Link],
• fit: It will control the size of non-positioned children widgets in the stack. It has three types: loose, expand
and passthrough.
fit:[Link],
• overflow: It control the children widget, whether visible or clipped, when it’s content overflowing outside
the stack.
overflow: [Link]
Note: To define width and height of a Stack widget, you can wrap it inside container.
• Positioned(): It is not the stack parameter but can be used in the stack to position (left, right, top, bottom)
the child widget.
Positioned ( top: , left: , right: , bottom:, width: , height:, )
IndexedStack
IndexedStack widget is similar to stack, but it will display only one child at a time. We use it
for easily switching between one child to another child according to our needs.
IndexedStack(
index: 1, //index value decide, which child will display
children: <Widget>[
Container( //index 0
color: [Link],
),
Container( //index 1
color: [Link],
),
Container( //index 2
color: [Link],
) ], )
Forms
Forms are used to gather information from user. It can be used for user authentication, adding user, searching,
filtering, ordering, booking etc. The form widget acts as a container, which allows us to group and validate the
multiple form fields. To create a form,
• Provide the GlobalKey, which is used to retrieve the form widgets.
• Use TextFormField to give the input field with validator property
• Create a button to validate form fields and display validation error.
final _formKey = GlobalKey<FormState>();
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
hintText: 'Enter Your Name: ',
labelText: 'Name',
icon: Icon([Link]),
),
validator: (value){
if(value!.isEmpty){
return 'Please Enter Your Name';
}
return null;
}, ),
Alert Dialogs
It is a pop-up box that appears at the top of the app content and middle of the
screen. We can categories Alert dialogs
• Basic AlertDialog: It is an acknowledgment or confirmation notification
• Confirmation AlertDialog: To confirm a particular choice before moving forward
in the application (like confirmation before deleting a contact)
• Select AlertDialog: This dialog displays the list of items, which takes immediate
action when selected.
• TextField AlertDialog: To accept user input ad alert Dialog box
AlertDialog Properties
• Title: AlertDialog(title: Text("Sample Alert Dialog"),
• Action: Action properties is required to choose yes or no
actions: <Widget>[
TextButton(child: Text("Yes"),),
TextButton(child: Text("No"),)
],)
• Content: It contain the body of AlertDialog widget. It can hold any kind of layout widget.
content: Text("It is the body of the alert Dialog"),
• Shape: provides the shape to the alert dialog box.
shape: CircleBorder(),
shape: CurveBorder(),
ContentPadding: Padding required for the content inside the AlertDialog widget.
contentPadding: [Link](32.0),
Card
A card is a sheet in rounded corner shape and has a shadow. Its properties
borderOnForeground: Used to paint the border in front of a child. By default it is
true.
color: Card’s background color
elevation: controls the shadow size below the card.
margin: used for card’s outer space.
shape: used for the shape of the card
shadowColor: Shadowcolor of a card
clipBehavior: used to clip the content of the card
Note: to customize (set width and size) the card’s size, it is required to place it in a
Container or SizedBox widget.
Navigation Drawer
A drawer is an invisible side screen. It is a sliding left menu that
generally contain important links and occupies half of the screen when
displayed. It is used with scaffold drawer property. The child of the
drawer is usually a ListView, which first child is a DrawerHeader and
remaining children are often constructed with ListTiles.
It is useful when you want to perform different page actions
 Gestures
Gestures allows us to interact with the mobile app some of the examples of gestures
are:
• When the mobile screen is locked, you slide your finger across the screen to unlock
it.
• Tapping a button on your mobile screen
• Tapping and holding an app icon on a touch-based device to drag it across screens.
Flutter divides the gesture system into two different layers
1) Pointers (PointerDownEvent, PointerMoveEvent, PointerUpEvent,
PointerCancelEvent)
2) Gestures
[Link]
Gesture Types
• Some of the widely used gestures are mentioned below:
• Tap − Touching the surface of the device with fingertip for a short period and then releasing
the fingertip. (onTap, onTapDown, onTapUp etc.)
• Double Tap − Tapping twice in a short time. (onDoubleTap) (onLongPress is also another
gesture)
• Drag − Touching the surface of the device with fingertip and then moving the fingertip in a
steady manner and then finally releasing the fingertip. (onVerticalDragStart,
onHorizontalDragStart etc)
• Flick − Similar to dragging, but doing it in a speeder way.
• Pinch − Pinching the surface of the device using two fingers.
• Spread/Zoom − Opposite of pinching.
• Panning − Touching the surface of the device with fingertip and moving it in any direction
without releasing the fingertip. (onPanStart, onPanEnd etc)
Example