Hi Friends,
Hope you are all well. In this post let’s talk something about gestures and see how to bring them into our flutter apps.
Let’s begin.
To learn the basics of flutter get my course – Click here.
Other flutter courses – here. (Affliate link)
A screencast of this post
Gestures are an interesting way to allow the user to interact with your app. For instance., when your screen is locked, you slide your finger across the screen to unlock it right ? That’s a simple gesture. Tapping on a button, Tapping and holding an app icon to drag it across screens; all these are various gestures that you use everyday to interact with your phone.
So, how do we bring these gestures in our applications. Let’s see that with a simple onTap() example in this post. Assume that you want a button with specific dimensions and a specific design. Now flutter by default comes with RaisedButton, Flat, Floating action and other button designs. To create a custom button the best way is to create a widget, design it to your desired specification and add the onTap() functionality to it.
Create a new Flutter project. Open the main.dart file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Gestures'), centerTitle: true, ), body: new Center(child: GestureDetector( onTap: () { print('Clicked'); }, child: Container( height: 50.0, width: 100.0, padding: EdgeInsets.all(10.0), decoration: BoxDecoration( color: Colors.lightBlueAccent, borderRadius: BorderRadius.circular(17.0), ), child: Center(child: Text('Click me')), ) )), ); } } |
This is a simple gesture detector that detects a tap gesture on a particular container. Now., when you run this you’ll notice a button with rounded edges on the center of the screen. Tap on it and you will notice that your container now behaves like a button. Similarly you could try it out with doubleTap() and other gestures as well.
If you noticed, you would see that the ripple effect is not replicated whenever the button is tapped. To show the ripple effect, simply use an InkWell.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body: new Center(child: InkWell( onTap: () { print('Clicked'); }, child: Container( height: 50.0, width: 100.0, padding: EdgeInsets.all(10.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(17.0), ), child: Center(child: Text('Click me')), ) )), |
Now you’ll notice the ripple effect.
Wait, what if there is more than one gesture arriving at a time. This scenario is called a gesture disambiguation and this is resolved by making the gestures fight one another in the arena. Yeah, That’s right. We’ll talk more about this in our forth-coming posts.
Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.
Donate – Click here.
Join our discord community – Click here.
Thanks for reading. Peace.. 
