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. b站——沐神——深度学习

    预备知识 数据操作 MXNet nd:(array函数:得到NDArray) [[1. 1. 1.] [1. 1. 1.]] <NDArray 2x3 @cpu(0)> np:(asnum ...

  2. C# DataTable.Select()根据条件筛选数据

    1.前言: 很多时候我们获取到一个表的时候需要根据表的包含的队列去筛选内容,一般来说可能想到的就是遍历整个表的内容进行条件筛选,但是这种方式增加了代码量且易出错,DataTable.Select()就 ...

  3. Day12-面向对象初识

    面向对象编程 Java的核心思想就是OOP 一.面向过程&面向对象 面向过程思想: 步骤清晰简单,第一步做什么,第二步做什么...... 面对过程适合处理一些较为简单的问题 面向对象思想: 物 ...

  4. python代码抛出异常

    from traceback import format_exc except Exception: print(format_exc())

  5. outlook2013 关闭后不能接收邮件了解决方法

    本人装的是2013版的outlook亲测有用,其他版本的本人没试过. 下载KeepOutlookRunning.rar 链接:https://pan.baidu.com/s/1hcNorKDLbpzV ...

  6. 《动态规划学习笔记》Day1-数字金字塔

    这是一道经典的洛谷水题了,虽说是IOI的(但毕竟很古老了),然后我提供一下我的思路吧. 链接洛谷题面:https://www.luogu.com.cn/problem/P1216 首先,金字塔的输入规 ...

  7. 第12章 使用 Entity Framework Core 保存数据(ASP.NET Core in Action, 2nd Edition)

    本章包括(请点击这里阅读其他章节) 什么是实体框架核心以及为什么应该使用它 向 ASP.NET Core 应用程序添加实体框架核心 构建数据模型并使用它创建数据库 使用实体框架核心查询.创建和更新数据 ...

  8. 学习使用数据库SQLServer (一)

    小记一下学习使用数据库时遇到的问题 1.建表时未设置主键约束名,此时删表主键会遇到困难,不能简单使用 ALTER TABLE NAME DROP CONSTRAINT 约束名: 而是要先找到数据表中主 ...

  9. 《Linux就该这么学》这本书写得真好,我很喜欢。

    本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极其适合用于Linux技术入门教程或讲课辅助教材,目前是国内最值得去读的Linux教材,也是最有价值 ...

  10. JAVA 学习打卡 day2

    2022-04-23 16:43:32 1.字符类型 (1)字符和整型之间的相互转换 给字符变量赋值可以使用数值和字符,它们都可以使程序正确地运行.要注意的是,字符要用一对单引号('')括起 (2)常 ...