Scribd
Upload
37 views19 pages

Chapter 2 Flutter Basics Lecture 3

abdisamed allaale

Uploaded by

Ayro Business Center
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
37 views19 pages

Chapter 2 Flutter Basics Lecture 3

abdisamed allaale

Uploaded by

Ayro Business Center
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1/ 19

CHAPTER 2 FLUTTER BASICS LECTURE 3

FLUTTER LAYOUTS, POINTER AND GESTURE


FLUTTER LAYOUTS

 The main concept of the layout mechanism is the widget. We know that
flutter assume everything as a widget. So the image, icon, text, and even
the layout of your app are all widgets. Here, some of the things you do not
see on your app UI, such as rows, columns, and grids that arrange,
constrain, and align the visible widgets are also the widgets.
 Flutter allows us to create a layout by composing multiple widgets to build
more complex widgets. For example, we can see the below image that
shows three icons with a label under each one.
CONT..

 In the second image, we can see the visual layout of the previous image.
This image shows a row of three columns, and these columns contain an
icon and label.
CONT..

 In the previous image, the container is a widget class that allows us to


customize the child widget. It is mainly used to add borders, padding,
margins, background color, and many more. Here, the text widget comes
under the container for adding margins. The entire row is also placed in a
container for adding margin and padding around the row. Also, the rest of
the UI is controlled by properties such as color, text.style, etc.
TYPES OF LAYOUT WIDGETS
 We can categories the layout widget into two types:

1. Single Child Widget


2. Multiple Child Widget
SINGLE CHILD WIDGETS
 The single child layout widget is a type of widget, which can have
only one child widget inside the parent layout widget. These widgets can
also contain special layout functionality. Flutter provides us many single
child widgets to make the app UI attractive. If we use these widgets
appropriately, it can save our time and makes the app code more
readable. The list of different types of single child widgets are:
 Container: It is the most popular layout widget that provides
customizable options for painting, positioning, and sizing of widgets.
CONTAINER EXAMPLE

Center(
child: Container(
margin: const EdgeInsets.all(15.0),
color: Colors.blue,
width: 42.0,
height: 42.0,
),
)
PADDING WIDGET

 Padding: It is a widget that is used to const Greetings(


child: Padding(
arrange its child widget by the given
padding: EdgeInsets.all(14.0)
padding. It ,
contains EdgeInsets and EdgeInsets.fr child: Text('Hello Senior!'),
omLTRB for the desired side where you ),
want to provide padding. )
CENTER AND ALIGN WIDGET

 Center: This widget allows you to


Center(
center the child widget within itself. child: Container(
height: 110.0,
 Align: It is a widget, which aligns its
width: 110.0,
child widget within itself and sizes it color: Colors.blue,
based on the child's size. It provides child: Align(
more control to place the child widget alignment: Alignment.topLeft,
child: FlutterLogo(
in the exact position where you need size: 50,
it. ),
),
),
)
SIZEDBOX AND ASPECTRATION WIDGET

SizedBox: This widget allows AspectRatio: This widget allows you


you to give the specified size to to keep the size of the child widget to
the child widget through all a specified aspect ratio.
screens.
SizedBox( AspectRatio(
width: 300.0, aspectRatio: 5/3,
height: 450.0, child: Container(
child: const Card(child: Text('Hello Senior! color: Colors.bluel,
')), ),
) ),
BASELINE AND CONSTRAINED BOX WIDGET
ConstrainedBox: It is a widget that
Baseline: This widget shifts the allows you to force the additional
child widget according to the constraints on its child widget. It means
child's baseline. you can force the child widget to have a
child: Baseline( specific constraint without changing the
baseline: 30.0,
baselineType: TextBaseline.alphab properties of the child widget.
ConstrainedBox(
etic, constraints: new BoxConstraints(
child: Container( minHeight: 150.0,
height: 60, minWidth: 150.0,
width: 50, maxHeight: 300.0,
color: Colors.blue, maxWidth: 300.0,
), ),
) child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red
),
),
FLUTTER GESTURES
Gestures are an interesting feature in Flutter that allows us to interact with
the mobile app (or any touch-based device). Generally, gestures define any
physical action or movement of a user in the intention of specific control of
the mobile device. 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, and
 Tapping and holding an app icon on a touch-based device to drag it across
screens.
We use all these gestures in everyday life to interact with your phone or
touch-based device.
Flutter divides the gesture system into two different layers, which are given
below:
1. Pointers
POINTERS

 Pointers are the first layer that represents the raw data about user
interaction. It has events, which describe the location and movement of
pointers such as touches, mice, and style across the screens. Flutter does
not provide any mechanism to cancel or stop the pointer-events from
being dispatched further. Flutter provides a Listener widget to listen to
the pointer-events directly from the widgets layer. The pointer-events are
categories into mainly four types:
• PointerDownEvents
• PointerMoveEvents
• PointerUpEvents
• PointerCancelEvents
CONT..

 PointerDownEvents: It allows the pointer to contact the screen at a


particular location.
 PointerMoveEvents: It allows the pointer to move from one location to
another location on the screen.
 PointerUpEvents: It allows the pointer to stop contacting the screen.
 PointerCancelEvents: This event is sent when the pointer interaction is
canceled.
GESTURES

It is the second layer that represents semantic actions such as tap, drag,
and scale, which are recognized from multiple individual pointer events. It is
also able to dispatch multiple events corresponding to gesture lifecycle like
drag start, drag update, and drag end. Some of the popularly used gesture
are listed below:
Tap: It means touching the surface of the screen from the fingertip for a
short time and then releasing them. This gesture contains the following
events:
 onTapDown
 onTapUp
 onTap
 onTapCancel
CONT..
Double Tap: It is similar to a Tap gesture, but you need to tapping twice in a short time.
This gesture contains the following events:
 onDoubleTap
Drag: It allows us to touch the surface of the screen with a fingertip and move it from
one location to another location and then releasing them. Flutter categories the drag into
two types:
Horizontal Drag: This gesture allows the pointer to move in a horizontal direction. It
contains the following events:
 onHorizontalDragStart
 onHorizontalDragUpdate
 onHorizontalDragEnd
Vertical Drag: This gesture allows the pointer to move in a vertical direction. It contains
the following events:
 onVerticalDragStart
 onVerticalDragStart
 onVerticalDragStart
CONT..
Long Press: It means touching the surface of the screen at a particular
location for a long time. This gesture contains the following events:
 onLongPress

Pan: It means touching the surface of the screen with a fingertip, which can
move in any direction without releasing the fingertip. This gesture contains
the following events:
 onPanStart
 onPanUpdate
 onPanEnd

Pinch: It means pinching (move one's finger and thumb or bring them
together on a touchscreen) the surface of the screen using two fingers to
zoom into or out of a screen.
GESTURE DETECTOR

 Flutter provides a widget that gives excellent support for all types of
gestures by using the GestureDetector widget. The GestureWidget is
non-visual widgets, which is primarily used for detecting the user's
gesture. The basic idea of the gesture detector is a stateless widget that
contains parameters in its constructor for different touch events.
 In some situations, there might be multiple gesture detectors at a
particular location on the screen, and then the framework disambiguates
which gesture should be called. The GestureDetector widget decides which
gesture is going to recognize based on which of its callbacks are non-null.
 Let us learn how we can use these gestures in our application with a
simple onTap() event and determine how the GestureDetector processes
this. Here, we are going to create a box widget, design it according to
CONT..

new Center(child: GestureDetector(


onTap: () {
print('Box Clicked');
},
child: Container(
height: 60.0,
width: 120.0,
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.circular(15.0),
),
child: Center(child: Text('Click Me')),
)
)),
END OF THE CHAPTER

You might also like