flutter---->flutter orientation
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的更多相关文章
- Flutter - flutter desktop embedding / flutter 桌面支持
2019年5月9日,随着谷歌在IO19宣布Flutter支持Web平台,就标志着Flutter已经全面支持所有平台(移动.网页.桌面.嵌入式). 现编一个跨平台小段子: 微软Xarmarin:喵喵喵? ...
- 我花了 8 小时,"掌握"了一下 Flutter | Flutter 中文站上线
Hi,大家好,我是承香墨影! 距离 Google 在 2018 世界移动大会上发布 Flutter 的 Beta 版本,Flutter 是 Google 用以帮助开发者在 Android 和 iOS ...
- Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...
- Flutter & Dart
Flutter & Dart https://www.dartlang.org/install https://flutter.dev/ https://flutter.dev/docs/ge ...
- 原生工程接入Flutter实现混编
前言 上半年我定的OKR目标是帮助团队将App切入Flutter,实现统一技术栈,变革成多端融合开发模式.Flutter目前是跨平台方案中最有潜力实现我们这个目标的,不管是Hybird还是React ...
- Flutter 初尝:从 Java 无缝过渡
准备阶段 下载 Flutter SDK 新建 Flutter 文件夹,克隆 Flutter SDK: git clone -b beta https://github.com/flutter/flut ...
- Flutter 实现原理及在马蜂窝的跨平台开发实践
一直以来,跨平台开发都是困扰移动客户端开发的难题. 在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如 WebView 和 React Native,来提升开发效率和 ...
- Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...
- Flutter 异常处理之图片篇
背景 说到异常处理,你可能直接会认为不就是 try-catch 的事情,至于写一篇文章单独来说明吗? 如果你是这么想的,那么本篇说不定会给你惊喜哦~ 而且本篇聚焦在图片的异常处理. 场景 学以致用,有 ...
- Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...
随机推荐
- Centos使用nohup实现后台运行程序
nohup和&的区别& : 指在后台运行 nohup : 不挂断的运行,注意并没有后台运行的功能,,就是指,用nohup运行命令可以使命令永久的执行下去,和用户终端没有关系,例如我们断 ...
- vue组件淡入浅出动画
点击动画 hello hello world! .test-enter, .test-leave-to { opacity: 0 } .test-enter-to, .test-leave { opa ...
- Java中File类
File类是java.io包中唯一代表磁盘文件本身的对象.File类的对象主要用来获取文件本身的一些信息,如文件所在目录.文件长度.读写权限等. 一. 文件的创建与删除 通常使用以下三种方法来创建一个 ...
- 核函数(kernel function)
在接触反演.算法等方面的知识后,经常听到"核"这个字,它不像对原始变量的线性变换,也不像类似于机器学习中激活函数那样的非线性变换,对原始数据进行变换,就可以将复杂的问题简单化.接下 ...
- 配置IDE
1.使用的ide Visual Studio Code 2.
- 2月26日Android学习
今天下载了AndroidStudio,但是不知道为什么java文件一直显示file outside of source root,可能是部分文件没有安装的原因,等文件全部下载完之后再看看.
- Java8中Stream的用法
Java8中Stream的用法 1.概述 Stream APl ( java.util.stream)把真正的函数式编程风格引入到Java中.这是目前为止对Java类库最好的补充,因为Stream A ...
- Ubuntu常用环境配置
gcc sudo apt-get install build-essential update-alternatives 管理python环境 # 添加版本 # update-alternatives ...
- FCC 高级算法题 对称差分
Symmetric Difference 创建一个函数,接受两个或多个数组,返回所给数组的 对等差分(symmetric difference) (△ or ⊕)数组. 给出两个集合 (如集合 A = ...
- Visual Studio 2022 离线包手动下载和清理
下载离线vsvs_Professional.exe --layout e:\vs2022 --all --includeRecommended --includeOptional --lang zh- ...