全屏浏览
缩小浏览
回到页首

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

posted @   huhx  阅读(895)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示