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. CF546E

    这题并不是太难 首先题目我们将每个城市拆点,由源点向一端连容量为初始人数的边,由另一端向汇点连容量为最后人数的边,然后按照题目要求从一端向另一端连容量无穷大的边 这样跑出最大流之后我们只需比较这个流量 ...

  2. win7下MongoDB安装配置

    之前看windows下安装MongoDB操作很是简单,今天在自己笔记本上安装一次,各种小问题.参照网上各大神帖子,再记录下个简单流程以便以后记得. 1.MongoDB官网上下载安装包 2.运行安装包, ...

  3. 项目实训 DAY14

    今天修改了一下PNN使之可以运行直接生成图片,而不是敲两段命令行.首先是使用python中subprocess启动新进程来达到命令行输命令的效果,即生成xx.pdf:再用os.unlink将中间品删除 ...

  4. Java基础|03.基础语法(2)

    Java安全|03.Java基础语法(2) 00x1 单例模式 定义: 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一 ...

  5. PSO 算法的变体python实现

    上演化计算课的时候老师让我们实现EOPSO算法(一种精英反向的粒子群优化算法),下面是他的算法步骤: 首先我们需要知道一些基础知识: (1)基础PSO算法 (2)精英反向解 import numpy ...

  6. #硬件 #资讯 #科普 #短报 SSD价格跳水根本停不下来!不断刷出新低

    一份来自日本的统计显示,10~12月的初步统计显示,PC市场的指标产品中,256GB TLC颗粒SSD价格再次下跌2美元,现在只有29.5美元.这已经是该指标产品连续5个季度下跌,创下史上心底记录,同 ...

  7. C语言——使用循环和递归计算阶乘

    使用循环和递归计算阶乘: /*使用循环和递归计算阶乘*/ #include<stdio.h> double fact(int num);//函数声明,阶乘函数,用于循环时调用 double ...

  8. vivado程序示例

    //full_add.v 全加器 module full_add( input a, input b, input carry, output sum, output count ); assign ...

  9. 在css 中使用calc并且含有变量

    bottom:~"calc(.9rem + constant(safe-area-inset-bottom))";   bottom:~"calc(.9rem + env ...

  10. RocketMQ4.x本地源码部署教程

    安装前提条件(推荐) 64bit OS, Linux/Unix/Mac (Windows不兼容)64bit JDK 1.8+; 快速开始 http://rocketmq.apache.org/docs ...