Flutter Zoom Checker: Detect Display Zoom for Optimal App Display
Published on by Flutter News Hub
The flutter_zoom_checker plugin enables you to effortlessly check if a user's device display is zoomed in, providing valuable insights for adjusting your app's layout and presentation accordingly.
Installation
To incorporate this plugin into your Flutter project:
dependencies:
flutter_zoom_checker: ^latest_version
Usage
Example 1: Checking Display Zoom
import 'package:flutter_zoom_checker/flutter_zoom_checker.dart';
Future isZoomed() {
return FlutterZoomChecker.isZoomed();
}
The FlutterZoomChecker.isZoomed()
method asynchronously returns true
if the display is zoomed, and false
otherwise.
Example 2: Implementing Zoom-Adaptive UI
import 'package:flutter_zoom_checker/flutter_zoom_checker.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
bool isZoomed = false;
@override
void initState() {
super.initState();
FlutterZoomChecker.onZoomChanged.listen((isZoomed) {
setState(() {
this.isZoomed = isZoomed;
});
});
}
@override
Widget build(BuildContext context) {
if (isZoomed) {
// Display a zoomed-in UI
} else {
// Display a normal UI
}
}
}
This example demonstrates how to use the onZoomChanged
stream to dynamically adjust your UI based on display zoom changes.
Conclusion
The flutter_zoom_checker plugin empowers you to create responsive apps that adapt gracefully to display zoom levels, ensuring optimal user experience across different devices and accessibility settings.