flutter---->flutter orientation
Get the orientation
1. Media Query
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("child"), centerTitle: true),
body: MainWidget(),
),
);
}
}
class MainWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Orientation orientation = MediaQuery.of(context).orientation;
return orientation == Orientation.portrait
? Container(width: 100, height: 100, child: Text("portrait"))
: Container(width: 100, height: 100, child: Text("landscape"));
}
}
2. Orientation Builder
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("child"), centerTitle: true),
body: OrientationBuilder(
builder: (context, orientation) {
return orientation == Orientation.portrait
? Container(width: 100, height: 100, child: Text("portrait"))
: Container(width: 100, height: 100, child: Text("landscape"));
},
),
),
);
}
}
3. Layout Builder
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("child"), centerTitle: true),
body: LayoutBuilder(
builder: (context, constraints) {
final bool isPortrait = constraints.maxHeight > constraints.maxWidth;
return isPortrait
? Container(width: 100, height: 100, child: Text("portrait"))
: Container(width: 100, height: 100, child: Text("landscape"));
},
),
),
);
}
}
Change Orientation
First, you have to import the services package.
import 'package:flutter/services.dart';
Next, you can set orientation by setting the value to setPreferredOrientations
method in SystemChrome
class. In the Flutter the application entry point is the main method. So you can set orientation before call the runApp method in the main method. But if you need to call a binding before the runApp method, you must call the ensureInitialized method in WidgetsFlutterBinding
class
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
runApp(MyApp());
}
Set landscape orientation only
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight]);
You can set either landscapeLeft
or landscapeRight
to make it work in one way.
Set portrait orientation only
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown,DeviceOrientation.portraitUp]);
If you set both portraitUp
and portraitDown
as orientation when you tilt your phone upside down it will rotate the app. If you don’t like to work in upside-down orientation, you can just set only the portraitUp
.
Change orientation dynamically
RaisedButton(
child: Text("Portrait"),
onPressed: () => SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]),
);
作者:
huhx
出处: www.cnblogs.com/huhx
格言:你尽力了,才有资格说自己的运气不好。
版权:本文版权归作者huhx和博客园共有,欢迎转载。未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
出处: www.cnblogs.com/huhx
格言:你尽力了,才有资格说自己的运气不好。
版权:本文版权归作者huhx和博客园共有,欢迎转载。未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。