zoukankan      html  css  js  c++  java
  • 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( 100, height: 100, child: Text("portrait"))
            : Container( 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( 100, height: 100, child: Text("portrait"))
                    : Container( 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( 100, height: 100, child: Text("portrait"))
                    : Container( 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]),
    );
    

  • 相关阅读:
    C# WinForm TextBox 作为密码输入框时,如何禁止密码查看器获取密码 ?
    .net 程序运行在不同框架版本下的支持配置(主要是.net4.0 与 .net2.0的兼容)
    比较C#的静态常量(const)和动态常量(static和readonly)
    Linux 本地yum源 、阿里yum源、163yum源的配置安装
    Mysql 单机数据库迁移几种方式
    sed中使用变量及变量中存在特殊字符‘/’处理
    Linux下安装zookeeper、配置zookeeper开机自启动
    MySQL 不同场景下的迁移方案(转载)
    配置YUM源出现Errno 14 Could not open/read repomd.xml 或者 "Couldn't open file /mnt/cdrom/repodata/repomd.xml" 错误的解决办法
    Docker安装Rabbitmq并实现挂载宿主机数据目录
  • 原文地址:https://www.cnblogs.com/huhx/p/13374221.html
Copyright © 2011-2022 走看看