Flutter – Introduction to Gestures

Sameeha moogab
2024
Outline
• What are Gestures
• State Management
• Statefulwidget
Gestures
Gestures are primarily a way for a user to interact with
a mobile (or any touch based device) application.
Gestures are generally defined as any physical action /
movement of a user in the intention of activating a
specific control of the mobile device. Gestures are as
simple as tapping the screen of the mobile device to
more complex actions used in gaming applications.
Handling Gestures in Flutter
• When it comes to creating applications,
you have to handle user gestures such as
touch and drags. This makes your
application interactive.
• To effectively handle gestures, you need to
listen to the gestures and respond to
them. Flutter offers a variety of widgets
that help add interactivity to your apps.
The widely used gestures
● Tap: Touching the surface of the device with fingertip for a short period
and then releasing the fingertip.
● Double Tap: Tapping twice in a short time.
● Drag: Touching the surface of the device with fingertip and then moving
the fingertip in a steady manner and then finally releasing the fingertip.
● 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.
The gestures in Flutter
 Tap
o  Double tap  Long press
onTapDown.
o o onDoubleTap o onLongPress
onTapUp
o onTap
o onTapCancel
The gestures in Flutter

 Horizontal drag
o onHorizontalDragStart
o onHorizontalDragUpdat
o onHorizontalDragEnd
The gestures in Flutter
 Pan
o onPanStart
o onPanUpdate
o onPanEnd
o onScaleStart
o onScaleUpdate
o onScaleEnd
Flutter – State Management
Since Flutter application is composed of widgets, the state management is also done
by widgets. The entry point of the state management is Statefulwidget. Widget can be
inherited from Statefulwidget to maintain its state and its children state.
Statefulwidget provides an option for a widget to create a state, State<T> (where T is
the inherited widget) when the widget is created for the first time through createState
method and then a method, setState to change the state whenever needed. The state
change will be done through gestures.
Statefulwidget
import 'package:flutter/material.dart';
class MyCardWidget extends StatefulWidget {
const MyCardWidget({
Key? key, }) : super(key: key);
@override
State<MyCardWidget> createState() => _MyCardWidgetState();
}
class _MyCardWidgetState extends State<MyCardWidget> {
@override
Widget build(BuildContext context) {
return const Card(
child: SizedBox(
height: 300,
width: 300,
),
color: Colors.yellow,
);
}
}
Statefulwidget
class _MyFavoriteIconWidgetState extends State<MyFavoriteIconWidget> {
bool isSelected = false;

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
setState(() {
isSelected = !isSelected;
});
},
child: Icon(
isSelected ? Icons.favorite: Icons.favorite_border,
size: 40,
color: isSelected? Colors.red: Colors.black ,
));
}
Statefulwidget
The StatefulWidget class doesn’t have a build method. But every stateful
widget has an associated state object, which does have a build method. You
can think of the pair of StatefulWidget and State as the same entity. In fact,
stateful widgets are immutable (just like stateless widgets), but their
associated state objects are smart, mutable, and can hold onto state even as
Flutter re-renders the widgets.
Statefulwidget
• setState is the third important Flutter method you
have to know, after build and createState. It exists
only for the state object. It more or less says, “Hey
Flutter, execute the code in this callback”.
return GestureDetector(
onTap: (){
setState(() {
isSelected = !isSelected;
});
setState
In this example, the state object is the
_MyHomePageState widget, and its
children interact and rely on the state.
When you press the button, it calls a
method passed to it from
_MyHomePageState. That method calls
setState, which in turn calls the
_MyHomePageState.build method again,
repainting the widgets whose
configurations have changed.
initState
The state object also has a method called initState,
which is called as soon as the widget is mounted in the
tree. State.initState is the method in which you initialize
any data needed before Flutter tries to paint it the
screen. When Flutter builds a stateful widget and its
state object, the first thing it’s going to do is whatever
logic is in the initState function.
initState
For example, you may want to tell ensure that a String
is formatted properly before the widget’s build method
is called and anything is rendered:
class FirstNameTextState extends State {
String name;
FirstNameTextState(this.name);
@override
initState() {
super.initState();
name = name.toUpperCase(); }
Widget build(BuildContext context) {
return Text(name); } }