App_development44444444444444444444.pptx

introduction to gestures in flutter

1. Flutter – Introduction to Gestures Sameeha moogab 2024

2. Outline What are Gestures State Management Statefulwidget

3. 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.

4. 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.

5. 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.

6. The gestures in Flutter Double tap onDoubleTap Tap onTapDown. onTapUp onTap onTapCancel Long press onLongPress

7. The gestures in Flutter Horizontal drag onHorizontalDragStart onHorizontalDragUpdat onHorizontalDragEnd

8. The gestures in Flutter Pan onPanStart onPanUpdate onPanEnd onScaleStart onScaleUpdate onScaleEnd

9. 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.

10. 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 , ); } }

11. 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 , )); } }

12. 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.

13. 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 ; });

14. 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.

15. 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 .

16. 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); } }