How can we know that the screen in touchable in Dart?

Question

To develop a responsive application we need to know if the user is using his finger or a mouse to adapt the behavior of the application. For instance, if the screen is touchable, the buttons will be bigger...

We can listen to Window.onTouch events and Window.onMouse events to guess if the screen is touchable.

But I would like to know it when the application is loading : before any interaction by the user.

How can I do that ?

Seems not to be a good idea http://stackoverflow.com/a/12303819/217408. The answer is a bit dated so maybe there are new findings ... — Günter Zöchbauer, Jan 28 '15 at 08:56
I remember that somebody proposed a little lib to do that on the Dartisans forum, but I cannot find it anymore. — Gérald Reinhart, Jan 28 '15 at 09:06

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

You could use dart:js and use an approach shown in this answer https://stackoverflow.com/a/2915912/217408

Add this to your index.html

<script type="application/javascript">
  function hasTouchSupport() {
    return 'ontouchstart' in document.documentElement;
  }
</script>

And call it from Dart like

import 'dart:html';
import 'dart:js' as js;

bool _hasTouchSupport;
bool get hasTouchSupport {
  if(_hasTouchSupport == null) {
    _hasTouchSupport = js.context.callMethod('hasTouchSupport');
  }
  return _hasTouchSupport;
}

void main() {
  print(hasTouchSupport);
}

false in Dartium/Chrome in Linux
true on my Android phone

edited May 23 '17 at 12:20

Community

1
1

answered Jan 28 '15 at 09:21

Günter Zöchbauer

623,577
216
2,003
1,567

Good enough for me, do not really want to add Modernizr – Gérald Reinhart Jan 28 '15 at 12:24
Just because the screen is touchable doesn't mean the user is controlling it with touch. Laptops with touch screens are becoming more common. It's a difficult issue. – Alan Knight Jan 29 '15 at 18:27
This is why I added the link to another SO answer below the question. It contains a good explanation for this problem. – Günter Zöchbauer Jan 29 '15 at 18:46

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

According to What's the best way to detect a 'touch screen' device using JavaScript? it's not easy to have something that works well for all browser.

If you go with Modernizr you can use:

 import 'dart:js' as js;

 bool get isTouchDevice => js.context['Modernizr']['touch'];

edited May 23 '17 at 11:43

Community

1
1

answered Jan 28 '15 at 09:30

Alexandre Ardhuin

71,959
15
151
132

How can we know that the screen in touchable in Dart?

2 Answers2