Flutter强制某个页面横屏

１.问题描述

在某个页面中使用flutter提供的方式来强制某个页面横屏:

SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown
  ]);

  

 

  
1
  
2
  
3
  
4
 

很遗憾！在Android上表现完美，但是在iOS中不能自动横屏，需要手动旋转手机。
万幸！pub上有这样一个package，可以完美解决：

orientation

２.使用orientation

２.1.在pubspec.yaml 中添加如下依赖：

dependencies:
  orientation: ^1.2.0

  

 

  
1
  
2
 

２.2.使用flutter命令安装依赖：

切换到项目的根目录下执行如下命令。

$ flutter pub get

  

 

  
1
 

２.3.在dart文件中引用：

import 'package:orientation/orientation.dart';

  

 

  
1
 

２.4.完整demo：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:orientation/orientation.dart';
import 'package:flutter/services.dart';


void main() {
  WidgetsFlutterBinding.ensureInitialized();
  OrientationPlugin.setPreferredOrientations(DeviceOrientation.values);
  OrientationPlugin.setEnabledSystemUIOverlays(SystemUiOverlay.values);
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DeviceOrientation _deviceOrientation;
  StreamSubscription<DeviceOrientation> subscription; @override
  void initState() { super.initState(); subscription = OrientationPlugin.onOrientationChange.listen((value) { // If the widget was removed from the tree while the asynchronous platform // message was in flight, we want to discard the reply rather than calling // setState to update our non-existent appearance. if (!mounted) return; setState(() { _deviceOrientation = value; }); OrientationPlugin.forceOrientation(value); });
  } @override
  void dispose() { _dispose(); super.dispose();
  } // https://github.com/flutter/flutter/issues/28134
  void _dispose() { subscription?.cancel();
  } @override
  Widget build(BuildContext context) { return WillPopScope( onWillPop: () { _dispose(); return Future.value(true); }, child: Scaffold( appBar: AppBar( title: const Text('Orientation Example'), ), body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Text( 'Running on: ${_deviceOrientation ?? 'Unknown Orientation'}\n'), RaisedButton( child: Text('FullScreen'), onPressed: () { OrientationPlugin.setEnabledSystemUIOverlays([]); }), RaisedButton( child: Text('NormalScreen'), onPressed: () { OrientationPlugin.setEnabledSystemUIOverlays( SystemUiOverlay.values); }), Spacer(), Padding( padding: const EdgeInsets.all(8.0), child: Text( 'Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.'), ), ], ), ), ), );
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
 

３.页面强制横屏

import 'package:flutter/material.dart';
import 'package:orientation/orientation.dart';
import 'package:flutter/services.dart';

class SignPage extends StatefulWidget {
  @override
  _SignPageState createState() => _SignPageState();
}

class _SignPageState extends State<SignPage> {
  @override
  void initState() { super.initState(); // 直接强制横屏 OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);
  } @override
  Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('签名'), ), body: Column( children: <Widget>[ Expanded( child: Container( color: Colors.blue, ), ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ RaisedButton( onPressed: () {}, child: Text("确定"), ), RaisedButton( onPressed: () {}, child: Text("重写"), ), RaisedButton( onPressed: () {}, child: Text("撤销"), ), RaisedButton( onPressed: () {}, child: Text("取消"), ), ], ), ], ), );
  }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
 

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/108618882