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

user_11345007 0
Viewed 1482

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()
      ],),);
    }),);
  }
}
flutter
3 Answers

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

user_162766870

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

user_117186330

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.

user_18005190
Related