【Flutter】DeviceOrientation以外でアプリの設定を変更して画面の向きを固定する方法

image

今回はFlutter製アプリの画面の向きを固定する方法について解説していきます。

画面の向きを固定する方法を検索すると、main.dartに以下のようにDeviceOrientationを記述する方法がヒットします。

main.dart

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,//画面を縦向きに固定する
  ]);
  runApp(MyApp());
}

しかしこの方法だと、flutter_native_splashなどでスプラッシュ画面を設定している場合に横向きでアプリを起動すると、スプラッシュ画面が横向きで表示されてしまうため、あまりイケていません。

そのため、元々アプリが縦画面だけの場合は別の方法で設定する必要があります。

iOSアプリの場合、xcodeで以下の画像のようにLandscape LeftとLandscape Rightのチェックを外してあげます。

xcode

Androidアプリの場合、AndroidManifest.xmlのactivityの間に以下のように「android:screenOrientation="portrait"」を追加します。

(横画面で固定する場合はportraitをlandscapeに変更します)

AndroidManifest.xml

・・・
<activity
    android:name=".MainActivity"
    android:screenOrientation="portrait"//これを追加
    android:exported="true"
    android:launchMode="singleTop"
・・・

最後に

今回は画面の向きを固定する方法について解説しました。

多くの技術記事ではDeviceOrientationを記述する方法が多くみられますが、今回紹介した方法も覚えておくといいと思います!

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (74)初心者向け (23)イベント (15)Google Apps Script (8)Nextjs (8)Firebase (7)可茂IT塾 (6)React (6)JavaScript (4)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)TypeScript (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)FlutterWeb (2)画像 (2)Figma (2)Next.js (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)フルリモート (1)学生向け (1)useSWR (1)supabase (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)LINE (1)Freezed (1)アイコン (1)debug (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)Material Design (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More