flutter横竖屏切换方案

flutter 开发的应用中有用到横屏竖屏间切换的场景

比如：A页面（竖屏）--》B页面（横屏）

A设置为竖屏，从A跳转到B的时候，需要设置为横屏，从B返回A又要强制设置回竖屏。

效果如下，完整工程下载见文末。

要解决的问题：

1.如何设置屏幕方向

2.需要知道上一个页面的屏幕方向，然后返回的时候再设置回同一个屏幕方向

解决方案
问题一，设置屏幕方向pub上已经有好用的库了，可以直接解决

https://pub.dev/packages/orientation

问题二

以A页面（竖屏）--》B页面（横屏）为例，具体思路如下：

1.在A页面跳转时获取当前页的屏幕方向，作为参数传递给下一个页面B

使用方法：MediaQuery.of(context).orientation 

RaisedButton(
                  onPressed: () {
                    int orientation = MediaQuery.of(context).orientation ==
                            Orientation.portrait
                        ? 0
                        : 1;
                    Navigator.push(context,
                        new MaterialPageRoute(builder: (context) {
                      return LandscapePage(orientation);
                    }));
                  },
                  child: Text(("next LandscapePage"))),

2.在B页面接收屏幕方向参数后，在 initState方法设置强制横屏，dispose方法再强制设置回A页面的屏幕方向

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print("wenyuan PortraitPage initState ${widget.orientation.toString()}");

    ///强制竖屏
    OrientationPlugin.forceOrientation(DeviceOrientation.portraitUp);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();

    print("wenyuan PortraitPage dispose ${widget.orientation.toString()}");
    if (widget.orientation == 1) {
      ///强制横屏
      OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);
    } else {
      ///返回时 设置回竖屏
      OrientationPlugin.forceOrientation(DeviceOrientation.portraitUp);
    }
  }

完整代码如下

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

/// create by wenyuan on 2019/7/6
/// Describe：

class PortraitPage extends StatefulWidget {
  int orientation;

  PortraitPage(this.orientation);
  @override
  _PortraitPage createState() => _PortraitPage();
}

class _PortraitPage extends State<PortraitPage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print("wenyuan PortraitPage initState ${widget.orientation.toString()}");

    ///强制竖屏
    OrientationPlugin.forceOrientation(DeviceOrientation.portraitUp);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();

    print("wenyuan PortraitPage dispose ${widget.orientation.toString()}");
    if (widget.orientation == 1) {
      ///强制横屏
      OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);
    } else {
      ///返回时 设置回竖屏
      OrientationPlugin.forceOrientation(DeviceOrientation.portraitUp);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PortraitPage"),
      ),
      body: Container(
        color: Colors.red,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                  onPressed: () {
                    int orientation = MediaQuery.of(context).orientation ==
                            Orientation.portrait
                        ? 0
                        : 1;
                    Navigator.push(context,
                        new MaterialPageRoute(builder: (context) {
                      return LandscapePage(orientation);
                    }));
                  },
                  child: Text(("next LandscapePage"))),
              RaisedButton(
                  onPressed: () {
                    int orientation = MediaQuery.of(context).orientation ==
                            Orientation.portrait
                        ? 0
                        : 1;
                    Navigator.push(context,
                        new MaterialPageRoute(builder: (context) {
                      return PortraitPage(orientation);
                    }));
                  },
                  child: Text(("next PortraitPage"))),
            ],
          ),
        ),
      ),
    );
  }
}

  完整工程下载