I've made a simple piano app in Flutter where there are multiple adjacent buttons, each playing a different note/sound. I want the button's onPressed: () method (or the code inside it) to work whenever the user's finger passes over that exact button's area (same for all buttons). The method should work each time even if the finger passes over the button more than once in a single swipe.
I've looked into the GestureDetector class but I don't think it quite achieves the multiple presses in a single swipe.
Any ideas how can I make this possible?
I'd suggest you to try using the Listener widget.
By setting PointerMoveEventListener you'll be able to perform different actions for each position of the pointer, but you'll have to map the position and sizes of each button.
I just figured this out.
Just wrap your key in a MouseRegion and call the onTap function on onEnter.
MouseRegion(
onEnter: (event) {
if(event.down){
onTap!();
}
},
child: InkWell(
borderRadius: _borderRadius,
highlightColor: Colors.grey,
onTapDown: onTap!;
),
)
This doesn't trigger the button or inkwell animation though. But this can be solved with a custom button.
Related
I'm building a screen and flutter where the user will visualize some data and when user user touche the screen I want to show up some options just like youtube app's player does.
For example, user is using the app in landscape orientation:
When it touches the screen I want to show some options just like that:
What are the options to achieve this behavior in my flutter app?
You can wrap the whole thing with GestureDetector
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => {// show the controls},
child: DataVisualizer(),
),
Be careful that using this method will also trigger the click or press method of the GestureDetector if they are tappable.
I have a bottom sheet inside a page. Inside a bottom sheet, I want that if its tapped, it closes both the sheet and the page. What I used to achieve this is calling Navigator.pop(context) twice. However, this affects the performance of the app as the navigation isn't really smooth. Are there other options to achieving this?
CustomButton2(
text: 'Check out other fleets',
width: 85.0,
onPressed: () {
Navigator.pop(context); //closes bottom sheet
Navigator.pop(context); //closes page to reveal previous screen
},
color: greenColor,
textSize: 18),
It depends on what do you want to achieve.
If it is to go back to a certain named page or Route in the Navigation Stack,
you can use the function below
Navigator.popUntil(context, ModalRoute.withName("Foo"))
This will automatically pop to a certain Route with the name given without "actually" popping twice.
If you do not want to use it, and it doesn't answer your problem, you can actually achieve it by popping twice just like you did. It will run more smoothly if it were on the release build.
More Info in https://api.flutter.dev/flutter/widgets/Navigator-class.html
Is there a way to recognize a touch input immediately in Flutter? Normal buttons of course don't work since they trigger on lift off. The closest thing I could find was using onTapDown by the GestureDetector widget. But this only triggers after a short delay. Thank you for any advice!
You could try wrapping your widget with the Listener widget and use the onPointerDown property.
e.g.
Listener(
child: Scaffold(),
onPointerDown: (_) {},
)
I am new to flutter and curious if we can create a custom back press button, not the one in appbar.
Just like a normal button that takes back to previous screen.
Here's how you so that:
Create a raw material button
Add the on press method to decide which screen it goes to.
In you main.dart, under the routes method, import the screen you want to push the current screen back to and then call it something.
Inside your onPress() method, you can call Navigator.pushNamed(context, routeName).
Now you can customise this raw material button as much as you want. Here are some of the main properties you can set:
textStyle
fillColor
elevation
padding
constraints
shape
child
Now give a name to this custom button you have created by extracting it into a widget.
Call the widget inside your code! If you want it to be aligned at the top left, which is usually where you find it:
Align(
alignment: Alignment.topLeft,
child: CustomButton()
),
Enjoy! PS: If you need any help, feel free to ask me and I will assist you to my best abilities!
If you are using onTap & onDoubleTap side by side with an InkWell, then a single tap gets delayed (300ms). I know the time is needed for the recognition of a double tap but also the effect is delayed, and that's a bad user interaction feeling.
What I've tried:
I found out, that the InkWell effect is startet as soon as any tap event callback gets called. If I use onTap alone, the callback and the effect is started instantly on the first touch; if I use onTap and onDoubleTap, the effect gets delayed.
I also tried using onTapDown, but this also gets delayed (possilbe Bug?)
child: InkWell(
onTap: () { print("Tap"); }, // gets delayed 300ms
onDoubleTap: () { print("Double Tap"); },
onTapDown: (x) { print("Tap Down"); } // gets delayed 300ms
}
So my question:
Is it anyway possible to change the InkWell (GestureDetector) to start the effect instantly. I think the solution could be, to change the onTapDown behavior; this should be called immediately if the user touches the widget.
I've now found a simple solution. I am only using the onTap function of the InkWell and have written the onDoubleTap algorithm my self. So the splash effect runs immediately because the original onDoubleTap isn't used. The tap function itself gets delayed (as it also would have been by using the original onDoubleTap function).
Pup.dev package
I've written a pub.dev package called InkWellSplash. Additional to the splash feature, you can now adjust the maximal time between two taps to recognize a double tap.
I'm pretty sure this package comes in handy and is useful for several developer
Links
Pub.dev - InklWellSplash
GitHub - InkWellSplash
Interactive Example