Menu
How can I check if the device is a touch device or a mouse device?
Using kIsWeb is not sufficient because if using web version of the app on a mobile device kIsWeb returns true, but I need it to return false because it is a touch device.
Checking the platform doesn't work either because if using web version of the app on an iOS device for example returns false for iOS platform check.
Use case - I have two different types of video players for my app. One is suitable for touch devices (you tap to show and hide controls) and one is suitable for mouse devices (controls show when you mouse into the player and hide when you mouse out).
Youtube has the same idea. If I use the youtube app or website on my iPhone I get touch controls. If I use the youtube app or website on my iPad Pro I get touch controls. If I use the youtube website on my Mac I get mouse controls at all screen sizes (even mobile screen sizes).
So I guess I really just need to know platform on the web. I can get platform if not on the web.
366
You can check whether your Flutter app is running on a web browser by using the kIsWeb constant from the foundation library. You can find more information about the foundation library in Flutter's official documentation.
MouseRegion is used when it is needed to compare the list of objects that a mouse pointer is hovering over between this frame and the last frame. This means entering events, exiting events, and mouse cursors. To listen to general pointer events, use Listener, or more preferably, GestureDetector.
Flutter Device Info. Step1: Add Flutter Device_information dependencies. Step 2: import the package device_info.dart. Step 3: instantiate the DeviceInfoPlugin. Step 4 : Creating object for individual OS such as android and iOS device. Complete source code to get Flutter device info with example.
This basic example will show you how to use the Mouse Region widget on any Flutter component. Create a new dart file called main.dart inside the lib folder. Step 1: Create a class that extends StatefulWidget with a demo Container widget of some height and width in its body.
If you're trying to do this on a Web or desktop device, you can use MouseRegion widget. If you go to the link, you can see how easily it detects mouse entries and exits. There's also the Draggable widget that can be used in conjunction with the DraggableTarget widget to do some cool things.
If the touch has been started from outside of my widget there is no event which fires on Listener widget. For example , in the Listener documentation , If you start your gesture from outside of the blue widget, when hovoring the blue widget there is nothing happened. Wrap the parent widget with a Gesture detector.
Great question @jwasher! I had the same issue - a touch and swipe based UI that was great as a native mobile app, great as an single page web app (SPA) on mobile web browsers, but that was weird and clunky for mouse based interactions when the SPA was used in a desktop web browser.
The solution I have settled on is to wrap sensitive widgets in a MouseRegion (https://api.flutter.dev/flutter/widgets/MouseRegion-class.html) to detect mouse activity at runtime, then reacting by augmenting the UI with buttons to provide a mouse focussed way of triggering actions previously only linked to touch triggers.
You could use this to "mouse-enable" individual widgets, or you could wrap the whole app in a MouseRegion, trip a state field when activity was detected then rebuild the widget tree in a substantially different way for point and click users.
This strategy may incur some minor complexity/CPU overhead on devices that will never have a mouse attached (like a smartphone), but the solution will be more flexible than a build or configuration time capability determination. If a user starts the app on a tablet, then puts it in a stand and attaches a bluetooth mouse - it will react appropriately.
56
You can't do this directly, but you can find out the screen size which can tell you what kind of device it is.
DeviceScreenType getDeviceType(BuildContext context) {
double deviceWidth = MediaQuery.of(context).size.shortestSide;
if (deviceWidth > 950) {
return DeviceScreenType.Desktop;
}
if (deviceWidth > 600) {
return DeviceScreenType.Tablet;
}
return DeviceScreenType.Mobile;
}
DeviceScreenType is just a custom enum I have made.
Thus, if this returns Desktop then it is a mouse device and not a touch device.
1
A device isn't "a mouse device" or "a pointer device". Events have an input type--see Pointer event.kind--but not the whole device. A laptop can have a touch screen, and a tablet can have a stylus or external mouse; an app running in those environments can receive both types of event.
Without knowing what you are trying to accomplish with this classification, is hard to advise on how to accomplish it. Trying to style your UI based on a guess of the primary interaction mode, for instance, is a completely different problem than reacting to a mouse event differently than a touch event.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
