如何在 Flutter 中将小部件设置为按钮

Question

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.

Answer 1

You can use InkWell

     InkWell(
        onTap: (){
         /// do something
        },
        child: Text('data')  /// your widget,
      ),

You can also use GestureDetector

Answer 2

Generally if you want to make anything tappable you can just wrap the widget with GestureDetector

Answer 3

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