CODEWITHSUNDEEP
flutterflutter-layoutflutter-dependencies
mar
mar

Reputation: 161

Flutter container doesn't respond to gestures

If I have empty container with set width/height gesture detector doesn't work, but if I add something like color, it starts to work.

Test app:

    import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  click(){
    _counter++;
    print('Clicked times: $_counter');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new GestureDetector(
          onTap: click,
          child: new Container(
            width: 50.0,
            height: 50.0,
            //color: Colors.transparent,
          ),
        ),
      )
    );
  }
}

Expected behavior is that gesture detector works when I set it's child constraints. This is something that possibly happens with all Widgets and other detectors.

Simple use case example - I want to drag some Container that is lets say width/height 4.0, but its too small, so I could embed that into larger emptyContainer with with width/height 16.0 and center alignment and could drag that one.

Workaround: add transparent color.

Logs

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel master, v0.4.1-pre.25, on Mac OS X 10.13.4 17E202, locale en-US) [✓] Android toolchain - develop for Android devices (Android SDK 27.0.3) [✓] iOS toolchain - develop for iOS devices (Xcode 9.3) [✓] Android Studio (version 3.1) [!] IntelliJ IDEA Ultimate Edition (version 2018.1.2) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [✓] Connected devices (2 available)

! Doctor found issues in 1 category.

Upvotes: 0

Views: 2104

Answers (1)

Darshan
Darshan

Reputation: 11659

A container with bounds (height and width) without child is just a placeholder. So if you are wrapping it with GestureDetector, it will ignore the tap or touch because per official documentation of GestureDetector class, By default a GestureDetector with an invisible child ignores touches;. That's the reason, the container won't respond to the touch / tap.

If you still want the empty container to respond to touch, you can use behavior: HitTestBehavior.opaque property of GestureDetector.

Hope this answers your question.

Upvotes: 5

Related Questions