Flutterで画面の向きを取得&変更する方法

画面の向きを変える

画面の向きを変える

// インポートする
import 'package:flutter/services.dart';

// 縦向き
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown,DeviceOrientation.portraitUp])

// 左向き
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);

// 右向き
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);

例

FloatingActionButton(
   onPressed: ()=> SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);,
   tooltip: 'Increment',
   child: const Icon(Icons.add),
),

画面の向きを取得する

向きを取得する

MediaQuery.of(context).orientation

MediaQueryを使えば、画面の向きを取得可能。

縦横判定

縦横判定

 MediaQuery.of(context).orientation == Orientation.landscape

画面の向きに合わせ、描画するWidgetを変える

向きに合わせWidgetを表示

OrientationBuilder(
   builder: (context, orientation) {
      return orientation == Orientation.portrait
         ? _buildVerticalLayout()
         : _buildHorizontalLayout();
   },
),