🐍

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

1 min read

画面の向きを変える

画面の向きを変える
// インポートする
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();
   },
),

Discussion

ログインするとコメントできます