Flutter: Gesture detector,InkWell

-

 

 Image for post  

1 Wrap your widget using GestureDetector:

@override
Widget build(BuildContext context) {
  return GestureDetector(
    dragStartBehavior: DragStartBehavior.start, // default
    child: Container(....
 

2 Adding callback functions

For getting information about where the gesture started we will need to add an implementation of two functions: onHorizontalDragStart and onVerticalDragStart .

return GestureDetector(
onHorizontalDragStart: _onHorizontalDragStartHandler,
onVerticalDragStart: _onVerticalDragStartHandler,
behavior: HitTestBehavior.translucent,
child: Container(...

 

3. Tap

onTap: () {
  ... do something
},

4.Double-tap

onDoubleTap: () {
  print("DOUBLE TAB");
},

 

5. Long press

onLongPress: () {
  print("Long press");
},
 

6. Button click

And what if we have a RaisedButton with onPressed handler in our Container that is wrapped with GestureDetector?

RaisedButton(
onPressed: () {
print('Button pressed');
},
child: Text("CLICK ME"),
),
 

7. Pinch/Scale

For preventing errors you cannot have simultaneously vertical , horizontal and scale handlers in one GestureDetector.

onVerticalDragStart: (DragStartDetails details) {},
onVerticalDragUpdate: (DragUpdateDetails details) {},
onVerticalDragEnd: (DragEndDetails details) {},
onScaleStart: (ScaleStartDetails details) {},
onScaleUpdate: (ScaleUpdateDetails details) {},
onScaleEnd: (ScaleEndDetails details) {},

Comments

Post a Comment

Popular posts from this blog

Flutter : Introduction

-
Image
  Introduction to Flutter Installation In this section, let us see how to install Flutter SDK and its requirement in a windows system. Step 1 − Go to URL, https://flutter.dev/docs/get-started/install/windows and download the latest Flutter SDK. As of April 2019, the version is 1.2.1 and the file is flutter_windows_v1.2.1-stable.zip. Step 2 − Unzip the zip archive in a folder, say C:\flutter\ Step 3 − Update the system path to include flutter bin directory. Step 4 − Flutter provides a tool, flutter doctor to check that all the requirement of flutter development is met. flutter doctor Step 5 − Running the above command will analyze the system and show its report as shown below − Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, v1.2.1, on Microsoft Windows [Version 10.0.17134.706], locale en-US) [√] Android tool chain - develop for Android devices (Android SDK version 28.0.3) [√] Android Studio (version 3.2) [√] VS Code, 64-bit editio
Read more

Dart: Functions

-
Image
  Functions Functions let you package multiple related lines of code into a single body that you can summon to avoid repeating those lines of code throughout your Dart application: A function consists of a return type , a function name , a parameter list in parentheses, and then a function body enclosed in braces. The code you're turning into the function goes inside the braces. When you call the function, you pass in arguments that match the types of the parameters of the function. Write a new function in DartPad that will just check to see if a given string is banana. bool isBanana( String fruit) { return fruit == 'banana' ; } The function uses return to return a bool value determined by the argument passed to the function. This function will always return the same value for any given input. If a function does not need to return a value, you can set the return type to void , such as for the main function.   Optional Parameters If a parameter to a funct
Read more

Firebase Cloud Messaging

-
Image
  what are push notifications? Push Notifications are a sort of pop-up messaging medium that alerts app users to what's going on in the app. They are also an important way to amplify user engagement in your app. For example, say a user forgets about the app once they have installed it. Then you can use push notifications as a mechanism to regain and retain their interest. Push notifications also help drive traffic to your app. Firebase Cloud Messaging is a service offered by Firebase which lets you send these notifications to your users. You can set up various configurations to send different notifications to different audiences based on time and routine. Because of all these benefits, we are going to use it to send notifications to our Flutter app. Step 1: Create a Flutter Project First, we are going to create a flutter project. For that, we must have the Flutter SDK installed in our system. You can find simple steps for flutter installation in the official documenta
Read more