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.
Related
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.
I use showModalBottomSheet to render a bottom sheet with buttons (StatefulWidgetWithButtons). Once a button is pressed the state of the sheet changes and it gets re-rendered with different content.
I would like that depending on a certain state the sheet becomes not dismissable. I can achieve this using
showModalBottomSheet(
isDismissable: false
builder: (context) => StatefulWidgetWithButtons()
)
however what I want to achieve is that depending on a certain button pressed within StatefulWidgetWithButtons the isDismissable property changes to true (or false).
I don't know how to achieve this since I know I can change the StatefulWidgetWithButtons but that won't rebuild the bottom sheet.
I also don't want to close and show again the bottom sheet but change its dismissable behaviour while it is rendered
I was able to get this behaviour by wrapping the non-dismissible layout variant of the bottom sheet in a GestureDetector with vertical drag handler like so:
GestureDetector(
onVerticalDragUpdate: (_) {},
child: ...
This prevents the default modal bottom sheet drag handlers from taking action
If you want to learn more about this solution and how it works you can read about it here: https://stackoverflow.com/a/71622120/11676468
It definitely seems more like a workaround/hack but it looks like the only alternative is to implement a completely custom showModalBottomSheet from scratch
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
I am new to Flutter and I need help on this. I want to create a circular image view in Flutter and on clicking the view I want the app to prompt the user to select the image from the mobile device's gallery. Upon selecting the image, the image should be displayed on the image view. Is there any way that this is possible?
Your question is very unclear. You need to show some sample/design first of what you want. Maybe draw something:
However, you can create a circular image with Widget called;
CircleAvatar(
child: Image.network("http://image.com"),
),
Then you can wrap it in GestureDetect() Widget and
GestureDetector(
Child: CircleAvatar(
child: Image.network("http://image.com"),
),
onTap: ImagePicker....,)
ImagePicker can be used to add the capability of allowing users to upload image from gallery.
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!