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]),
);

flutter---->flutter orientation的更多相关文章

  1. Flutter - flutter desktop embedding / flutter 桌面支持

    2019年5月9日,随着谷歌在IO19宣布Flutter支持Web平台,就标志着Flutter已经全面支持所有平台(移动.网页.桌面.嵌入式). 现编一个跨平台小段子: 微软Xarmarin:喵喵喵? ...

  2. 我花了 8 小时,"掌握"了一下 Flutter | Flutter 中文站上线

    Hi,大家好,我是承香墨影! 距离 Google 在 2018 世界移动大会上发布 Flutter 的 Beta 版本,Flutter 是 Google 用以帮助开发者在 Android 和 iOS ...

  3. Flutter 即学即用系列博客——06 超实用 Widget 集锦

    本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...

  4. Flutter & Dart

    Flutter & Dart https://www.dartlang.org/install https://flutter.dev/ https://flutter.dev/docs/ge ...

  5. 原生工程接入Flutter实现混编

    前言 上半年我定的OKR目标是帮助团队将App切入Flutter,实现统一技术栈,变革成多端融合开发模式.Flutter目前是跨平台方案中最有潜力实现我们这个目标的,不管是Hybird还是React ...

  6. Flutter 初尝:从 Java 无缝过渡

    准备阶段 下载 Flutter SDK 新建 Flutter 文件夹,克隆 Flutter SDK: git clone -b beta https://github.com/flutter/flut ...

  7. Flutter 实现原理及在马蜂窝的跨平台开发实践

    一直以来,跨平台开发都是困扰移动客户端开发的难题. 在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如 WebView 和 React Native,来提升开发效率和 ...

  8. Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

    前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...

  9. Flutter 异常处理之图片篇

    背景 说到异常处理,你可能直接会认为不就是 try-catch 的事情,至于写一篇文章单独来说明吗? 如果你是这么想的,那么本篇说不定会给你惊喜哦~ 而且本篇聚焦在图片的异常处理. 场景 学以致用,有 ...

  10. Flutter 即学即用系列博客——04 Flutter UI 初窥

    前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...

随机推荐

  1. ZSTUOJ刷题12:Problem B.--深入浅出学算法007-统计求和

    Problem B: 深入浅出学算法007-统计求和 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 6782  Solved: 3693 Descript ...

  2. Leetcode本地阅读器开发--01界面设计二

    返回项目声明及目录:Leetcode本地阅读器开发--总声明 继续上一节内容: 1.第一个内容是左边第一行的功能,读取默认路径和修改路径.此路径为本地阅读器的搜索题目的主目录. 为了整个程序都能读取工 ...

  3. Navicate 链接 MySQL8.0版本 连接报错问题 1251错误,Clinent does not support authentication protocol requested by server

    网上查到的原因是: mysql8 之前的版本中加密规则是mysql_native_password: mysql8之后,加密规则是caching_sha2_password: 找到的解决方法是: 把m ...

  4. 解决spring boot 2.6.4版本循环依赖问题

    引用spring boot 2.6.4 版本 报循环依赖错误 *************************** APPLICATION FAILED TO START ************* ...

  5. 学习Java的第一个代码

    HelloWorld 新建一个文件夹 新建一个Java 文件后缀为java hello.java 编写代码 public class hello{ public static void main(St ...

  6. linux安装mongo-c-driver

    yum install mongo-c-driver sudo yum install cmake openssl-devel cyrus-sasl-devel $ wget https://gith ...

  7. NODEJS的误打误撞

    我接触nodejs 纯属是误打误撞,之前在做一个房地产项目的时候,客户提出了一个需求,我大概整理一些"我们需要员工只能在公司登陆房管系统并进行操作,回家是不允许进行登录的",其实对 ...

  8. 与用户交互 Scanner

    与用户交互 Scanner Scanner对象 Java提供了一个工具类,可以用以获取用户的输入.java.util.Scanner 是Java5的新特征 基本语法 Scanner s = new S ...

  9. Pytorch GPU加速

    import torch import torch.nn.functional as F import torch import torch.nn as nn import torch.nn.func ...

  10. Hadoop服务启动失败

    Hadoop服务启动失败今天启动Hadoop时,终端报了一个新的错误 ```bashStarting namenodes on [192.168.19.128]192.168.19.128: ssh: ...