How to Listen Screen Orientation Mode Change in Flutter
Introduction
Flutter is a popular framework for building cross-platform mobile applications. One of the key aspects of mobile app development is handling screen orientation changes. This can be crucial for providing a seamless user experience, as different screens and devices may have varying orientations. In this article, we will explore how to listen to screen orientation mode changes in Flutter.
Handling Screen Orientation Changes
To handle screen orientation changes in Flutter, you can use the `WidgetsBinding` class, which provides a `didChangeMetrics` callback that gets called when the device’s screen metrics change, including orientation. However, a more straightforward approach is to use the `orientation` property of the `MediaQuery` class.
Listening to Orientation Changes
You can listen to orientation changes by using the `MediaQuery` class and its `orientation` property. Here’s a simple example of how you can achieve this:
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
MyHomePageState createState() => MyHomePageState();
}
class _MyHomePageState extends State
@override
void didChangeDependencies() {
super.didChangeDependencies();
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
if (screenWidth > screenHeight) {
print(‘Landscape’);
} else {
print(‘Portrait’);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(‘Screen Orientation Change Example’),
),
);
}
}
“`
However, the above code only checks the orientation when the widget is built or when the dependencies change. To continuously listen to orientation changes, you can use a `NotificationListener` to listen to `OrientationChangedNotification` notifications.
Using NotificationListener
Here’s how you can use a `NotificationListener` to listen to `OrientationChangedNotification` notifications:
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
MyHomePageState createState() => MyHomePageState();
}
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
return NotificationListener
onNotification: (notification) {
if (notification.orientation == Orientation.landscape) {
print(‘Landscape’);
} else {
print(‘Portrait’);
}
return true;
},
child: Scaffold(
body: Center(
child: Text(‘Screen Orientation Change Example’),
),
),
);
}
}
“`
Conclusion
In conclusion, handling screen orientation changes in Flutter can be achieved by using the `MediaQuery` class and its `orientation` property, or by listening to `OrientationChangedNotification` notifications using a `NotificationListener`. Both methods have their own advantages and can be used depending on your specific requirements.
FAQs
1. How do I get the current screen orientation in Flutter?
You can get the current screen orientation in Flutter by using the `MediaQuery` class and its `orientation` property.
2. Can I use the `WidgetsBinding` class to handle screen orientation changes?
Yes, you can use the `WidgetsBinding` class to handle screen orientation changes, but it’s not the most straightforward approach.
3. How do I listen to screen orientation changes in Flutter?
You can listen to screen orientation changes in Flutter by using a `NotificationListener` to listen to `OrientationChangedNotification` notifications.
4. What’s the difference between portrait and landscape orientations?
Portrait orientation refers to a vertical screen layout, while landscape orientation refers to a horizontal screen layout.
5. Can I lock the screen orientation in Flutter?
Yes, you can lock the screen orientation in Flutter by using the `SystemChrome` class and its `setPreferredOrientations` method.
