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
Related
I want to dim (gray) the background when the bottom sheet opens, like a modal bottom sheet, but still be able to interact with the rest of the UI while the bottom sheet is open - like a regular bottom sheet.
Any ideas?
Even though, I won't recommend creating such an effect as it is not very understandable from the user perspective.
You can achieve this by using the IgnorePointer, Stack and setState((){})
1- Add a field bool showOverlay = false;
2- Align some Container to with Alignment.bottom to represent ur bottom sheet
3- Put some overlay Container with some background color and opacity and wrap it with IgnorePointer(ignoring: true, ...) which will let it not interfere with your widgets below.
I think you got it from here.
I am currently trying to create something like a TabBar. I created a horizontal ListView which should work as the TabBar and I my goal is, that one row fills itself with a list that contains the cards for the Tab I clicked on and refreshes when I click on another one. Is there a way to do that? It should look like this:
Reference Picture
Did you look at Work with tabs, an introduction to TabBar, TabBarView and DefaultTabController?
You could also create it from scratch using a ListView with a Card wrapped in a GestureDetector or a ListTile, and detect taps on onTap, which would set the selected data and update state using setState.
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!
I have a showModalBottomScreen activated displaying several images in GridView.
Here's my App Screen with BottomModalSheet on
All of those images are Draggable
Here's the Draggable Image
return Container(child: LongPressDraggable(data: img,feedback: img,child: img));
What I need my app to do is : When I start to drag one of the images, the Bottom Modal Sheet should close(pop) and I must be able to submit the draggable onto a drag target. But the Bottom Modal Sheet closes and I am unable to retain the draggable.
This is what I used:
onDragStarted: ()=> Navigator.of(context).pop()
The error message is get in my debug console: OPTS_INPUT: First frame was drawed before optimized, so skip!
How do I overcome this?
Perhaps you should create a PersistentBottomSheetController controller inside your widget, along with GlobalKey<ScaffoldState> key for your widget's scaffold ( used to control the showModalBottomSheet ) .
And change onDragStarted:() => controller.close()
If you could provide more details about your app, maybe I would be of more help.
I'm new to Flutter, trying to build my first app.
my main app body contains a one level ExpansionTile list, which can be filterable by a searchbar.
I'm trying to implement the following behavior -
after a user press a tile to reveal the expanded info
1. the keyboard, if present, should hide
2. previously open tile if expanded should collapse
I have tried using GestureDetector on the root widget with on tap function taking focus, but it does not detect tapping on tiles.
using expansionList onExpansionChanged seems logical but i don't understand how to use it
advice will be greatly appreciated..