How to detect if clicked outside a statefull class / widget in flutter

Question

I have a custom reaction bar like Facebook which open/close on click on, but i need to change it's size when click out side, or on list scroll in order to close it

any ideas for doing this?

for example the following code:

class TestClass extends StatefulWidget {
  const TestClass({Key? key}) : super(key: key);

  @override
  _TestClassState createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: ListView.builder(itemBuilder: (context,index){

      return Container(height: 300,width: 200,child: Column(children: [
        Text("On press test "),
        Text("On press text 2"),
        reactionsBar()
      ],),);
    }),);
  }
}

Sure, i added a code snippet, i need to make a change in reactionsBar when clicking outside or scrolling the list or ever clicking on app bar or navigation bar if exists. — Mohamad Alzabibi, Aug 20 '21 at 11:34
I've seen it but it's doesn't serve my design, i want a way to do it on my own @GOKU — Mohamad Alzabibi, Aug 24 '21 at 05:56
you can nest GestureDetectors. wrap your Scaffold with one that fires the "outside" function, and wrap your target with one that fires the "inside" function. — blaneyneil, Aug 25 '21 at 00:05
@blaneyneil I've thought of that already, but the problem here that the reaction bar in nested from the parent Scaffold, that's why i'm looking for a way to get a callback when clicking out side with out passing that — Mohamad Alzabibi, Aug 25 '21 at 15:26
you also need to highlight how you are showing the reactionsBar() — Shrestha Bibash, Aug 31 '21 at 03:42

score 0 · Answer 1 · answered Aug 25 '21 at 22:16

0

You can use gesturedetector Widget .when user click gesturedetector ,resize reactionsBar. and when user reactionsBar ,restor size reactionsBar.

answered Aug 25 '21 at 22:16

akram abdullah

166
6

I already implemented this case, but i want to close the reaction bar when clicking outside or scrolling the list since it's in a list of items – Mohamad Alzabibi Aug 26 '21 at 12:30
See this link https://medium.com/nonstopio/hide-or-show-app-bar-and-bottom-navigation-bar-while-scrolling-in-flutter-3994f78e52c0 – akram abdullah Aug 26 '21 at 22:37
Yeah I thought this way but i have to handle that in many places not just on scroll it's on click on any item in screen like app bar , bottom navigation bar , post content .. etc so it takes many efforts, I guess there should be something like focus lost or something similar – Mohamad Alzabibi Aug 27 '21 at 20:49

score 0 · Answer 2 · answered Aug 28 '21 at 22:11

0

Use a FocusNode on the widget and add a listener to it, so that you can detect change on focus and execute your code accordingly. See this answer for more details.

Otherwise you might wrap your widget in a Focus widget, as follows:

Focus(
  child: TextFormField(...),
  onFocusChange: (hasFocus) {
    if(hasFocus) {
      // do stuff
    }
  },
)

Source

answered Aug 28 '21 at 22:11

fulcus

47
1
10

It seems like it's not working with any widget, just with the TextField – Mohamad Alzabibi Aug 30 '21 at 11:44
Check out [the code sample](https://api.flutter.dev/flutter/widgets/Focus-class.html), it works with any widget – fulcus Aug 30 '21 at 13:36
I've checked out the example actually it depends on onTap which i should put on top of each widget i might press on in the screen, which is the same problem that i'me looking to solve – Mohamad Alzabibi Aug 30 '21 at 17:15

Zan · Answer 3 · 2021-09-01T01:03:29.027

Use Stack() and have a container that will fill the entire screen behind your reaction bar. Use GestureDetector to detect the tap on that container.

Stack(
    children: [
      GestureDetector(
        onTap: () {
          print("tapped outside");
        },
        child: Container(color: Colors.red),
      ),
     // put your reaction bar here
    ],
  ),

Another solution to allow user to click or drag on objects outside the reaction bar:

Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTapDown: (_details) {
          Rect tapRect = Rect.fromCircle(
              center: Offset(
                  _details.globalPosition.dx, _details.globalPosition.dy),
              radius: 1);
          RenderBox reactionBox =
              _keyReactionBar.currentContext?.findRenderObject() as RenderBox;

          final reactionBottomRight = Offset(
            reactionBox.localToGlobal(Offset.zero).dx + reactionBox.size.width,
            reactionBox.localToGlobal(Offset.zero).dy + reactionBox.size.height,
          );

          print(reactionBottomRight);

          Rect reactionRect = Rect.fromPoints(
              reactionBox.localToGlobal(Offset.zero), reactionBottomRight);
          if (!reactionRect.overlaps(tapRect)) {
            print("tapped outside reactionsBar");
          }
        },
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                print("hello");
              },
              child: SizedBox(
                width: 200,
                height: 200,
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                print("tapped on reactionsBar");
              },
              child: SizedBox(
                key: _keyReactionBar,
                width: 200,
                height: 200,
                child: Container(
                  color: Colors.blue,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

I'm wrapping the entire screen/body with GestureDetector and used onTapDown to get where the tap has been happened. Then, I will check if it is within the area of reaction bar or not.

That's what I'm trying to avoid, because I have many places to click on, and a list to scroll two — Mohamad Alzabibi, Aug 31 '21 at 10:28

How to detect if clicked outside a statefull class / widget in flutter

3 Answers3