I set two widgets in a Stack(), the one in the back is a sidebar and the one in the front is my main page.
When I click on the menu button from the main page, the main page gets shifted to the right and then the user can see the sidebar.
Now the problem is when the sidebar gets displyed i'm obliged to click exactly on the menu button to go back to the main page.
What i want to do is just to click anywhere in the main page to hide the sidebar.
I mean that i want to set the whole main page as a button when the sidebar is displayed.
You can use InkWell
InkWell(
onTap: (){
/// do something
},
child: Text('data') /// your widget,
),
You can also use GestureDetector
Generally if you want to make anything tappable you can just wrap the widget with GestureDetector
I fixed it by wrapping the main page with InkWell() and I added this to the onTap property"
InkWell(
onTap: isSidebarCollapsed ? () {
setState(() {
isSidebarCollapsed = false;
});
} : null,
child: Container(...)
)
Note that isSidebarCollapsed is the variable that determines if the menu is displayed or not.
Explaination of the code:
If the sidebar is collapsed (is displayed) then the onTap property returns a function where I set the variable isSidebarCollapsed to false (to say that the sidebar is gonna be hidden).
Else it returns null
Related
I want to implement this page swipe behaviour in Flutter as shown in the picture. The user should be able to drag the screen from the right edge of the screen to the left up until the page is dragged halfway through the screen. Once released, the app will move onto a new page.
Desired Outcome
You can use Slidable Package and wrap the whole page in a slideable.
Slidable(
key:UniqueyKey(),
endActionPane: ActionPane(
onDismissed: (){}, // Leave empty, confirmDismiss will handle event
confirmDismiss: () asnyc {
// function that rerender page with next question
}
children: [] //list of widgets to show when slide
child: // this is the widget that shows and will be slideable
if you want to have both sides you just add startActionPane aswell.
just like the title says, when the showModalBottomSheet appear i want to press some button in the body/screen without closing the showModalBottomSheet i already set
isDismissible: false,
barrierColor: Colors.transparent,
but no button can be press
The short answer to your question is to wrap your bottom sheet with a GestureDetector and to do some processing in there yourself and avoid the touch event to get to the modal sheet. Here is a link to a similar answer on SO.
From what I understand, ModalBottomSheet internally uses BottomSheet and its code, where the actual presentation is done looks like this:
return AnimatedBuilder(
animation: widget.route!.animation!,
child: BottomSheet(
animationController: widget.route!._animationController,
onClosing: () {
if (widget.route!.isCurrent) {
Navigator.pop(context);
}
},
If you look at the onClosing() callback, it simply dismisses the object without checking with any external callbacks so I don't really think you can achieve that with a modal bottom sheet in Flutter without wrapping it inside a GestureDetector
I have a problem with a BottomNavigationBar. My app has two screens and one of them has a bottom sheet that doesn't hide on disposing of the first screen when I'm tapping on the icon of the second screen. BottomNavigationBar works normally and screens switch, but how to hide the bottom sheet of the first screen when shown the second screen I have no ideas. Could you help me solve that?
Calling:
void _showForm(int id) async {
showBottomSheet(
context: context,
elevation: 5,
builder: (context) => BottomSheetSwitch(_refreshJournals, id));
}
Closing (inside bottom sheet):
Navigator.of(context).pop();
P.S. I couldn't solve that problem, so I change showBottomSheet to showModalBottomSheet like that was in: how to set showModalBottomSheet to full height?
You can try to provide a key to the stateful widget of BottomSheet. And access that key's context just use the Navigator's pop method on tap or change of the screen. It might help you.
You can use it like
Navigator.of(key.currentContext).pop();
Else call the function of your BottomSheet using the key. Like as below
Declare GlobalKey with state in your currentWidget.
GloabalKey<BottomSheetWidgetState> closeKey = GloabalKey();
Declare one function closeBottomSheet in your bottomsheet widget state.
void closeBottomSheet(){ Navigator.of(conext).pop(); }
Call the function using the key.
closeKey.currentState.closeBottomSheet();
And done.
I have an app that has a ListView and Floating Button. I wanted to hide the Floating Button if Index 0 in the ListView is shown and show the Floating Button when Index 0 is not shown in the ListView. Most of the information in the web (including Stackoverflow) covers hiding the button when scrolling (direction) and not based on the index shown by ListView.
you can checklist null or not. I just add a demo code.
List<String> demoList = new List<>();
floatingActionButton: demoList != null ?
FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
child: Icon(Icons.navigation),
backgroundColor: Colors.green,
)
:Text(''),
);
if the list has a value then it shows a floating button.
Use Visibility widget around FloatingActionButton. When the item shows, just call setState() method with visibility value.
Is there any way to handle long press on the items of BottomNavigationBar in Flutter?
I see "onTap" event handler, but nothing else and I also cannot wrap the Items into GestureDetector.
I can wrap the whole BottomNavigationBar section into the GestureDetector but in this case it's not possible to realize which Item was pressed :-/
Thanks in advance!
After couple of days I finally understood how to realize it: you just need (as almost always) wrap Icon and Text of you bottom navigation bar items into GestureDetector widget and it works :)
The snippet would be:
new BottomNavigationBarItem(
icon: GestureDetector(
onLongPress: (){print("long tap icon");
setState(() {
_resetSct(context, i);
});
},
child: new Image.memory([skiped])), //Icon(Icons.looks_one),//photos[0].icon,
title: GestureDetector(
onLongPress: (){print("long tap title");
setState(() {
//do stuff
});
},
child: Text([skipped]))
With Flutter I recommend you to create your custom Bottom Navigation Bar as it is very easy to do.
Note: There is no way to do what you want using the default BottomNaivgationBarItem.
You need also to add enableFeedback as true and wrap your icon with GestureDetector
BottomNavigationBar(
enableFeedback: true,
This is works for me.