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

  • 相关阅读:
    记一次VS2010和VS2015自定义颜色的过程
    Git使用笔记
    VS winsock.h和ws2def.h大量重定义报错的问题
    在ASP.NET MVC 3中使用日志记录组件Elmah和NLog
    Entity Framework 6新特性:全局性地自定义Code First约定
    在ASP.NET MVC 3 中自定义AuthorizeAttribute时需要注意的页面缓存问题
    SSH开发记录
    iOS开发知识要点
    (收藏)在 iPhone/iPad 中随意修改数字键盘按钮
    iPhone开发 – 数据持久化
  • 原文地址:https://www.cnblogs.com/huhx/p/13374221.html
Copyright © 2011-2022 走看看