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 ...
随机推荐
- 20192305 王梓全Python程序设计实验三报告
20192305 王梓全Python程序设计实验三报告 课程:<Python程序设计> 班级: 1923 姓名: 王梓全 学号:20192305 实验教师:王志强 实验日期:2021年5月 ...
- mac下eclipse关联svn插件
由于新冠状病毒的疫情这一周都需要在家办公了,家里只有一个mac之前只是娱乐工具,今天不得不用它撸代码,无奈重新安装各种环境,mac和windows的环境安装区别还是很大的,今天差点折磨死我,尤其是在e ...
- modesim : mosel not define
这个星期仿真sdram时,添加的sdram 模型文件在modesim中总是找不到,在qq群里提问和私聊别人都没有得到解决方法.于是自己摸索了好多天.终于得到了解决. 可以看到modesim里面work ...
- js小数相加精度不准确
例: 0.1+0.1+0.1+0.7 != 1 0.1+0.2 != 0.3 解决办法: 相加 function addNum(num1, num2) { let sq1, sq2; ...
- AirSim 自动驾驶仿真 (2-3) python控制无人机 win10
1首先搭建好环境 参考 2 python控制 https://blog.csdn.net/Zhaoxi_Li/article/details/108002544 官方代码位置 自己pythonj教程 ...
- PLC入门笔记9
梯形图电路之电机控制 电机直接启动控制电路 电机正反停控制电路 我的图.. 但愿最后说的不要发生吧 例如下错了程序 导致... 最好外部电路互锁一下.. 电机故障判断电路 我的图.. 电机故障转换电路 ...
- Redis各个客户端的对比
[Spring RedisTemplate 的底层一开始使用Jedis.但是自从SpringBoot2开始,底层开始使用了Lettuce,故不算在内] [题外话:如果要使用Spring来集成对Redi ...
- Linux系统管理实战-软件包管理
软件包管理 在Linux中,不同的发行版软件管理的方式可能不一样,具体来说,主要分为两大派: RPM: Rpm Package Manager CentOS系统软件安装三种方式 rpm:安装简单,可定 ...
- swing编程
在界面中放入图片:路径以项目路径为准 img包一般放在项目文件夹下 package adapter;import java.awt.Color;import java.awt.Dimension;i ...
- 6、jmeter的配置元件:参数化--CSV文件
1.参数化一些数据,就需要用到csv文件 Filename:文件位置和文件名 (和jmeter同一个目录就不需要写哪个盘 直接写文件名字就可以了) File encoding:编码 Variable ...