[FlutterFlow] 画面の向きを固定する方法

はじめに

FlutterFlowについて

FlutterFlowは、爆速モバイルアプリ開発を実現する、画期的なビジュアルプログラミングツールです。簡単なアプリなら本当にその日のうちにテストフライトまでが完了していると優れたツールです。

FlutterFlowの優れている点

FlutterFlowの優れた点として拡張性があります。プリセットで用意されていない機能や要素は自分でコーディングすることができるため、痒いところになるべく手が届くようになっています。

目標

アプリの画面を縦に固定するCustom Actionを作成して、アプリの全ページを縦画面に固定します。

CustomActionの作成

サイドバーから、「Connect > CustomCode」を選択します。
新しい「CustomAction」を作成します。名前をsetPortraitUpとしてください。
Action Codeには以下のように記述します。
作成すると自動的にimportが複数書かれます。この部分はその他の設定によって若干変わったりするので、以下の部分をコピペしてください。

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
// この下の部分をコピペする

import 'package:flutter/services.dart';

Future setPortraitUp() async {
  // Use to set portraitUp
  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
}

完了すると、右上のSaveActionで保存します。
完成例を載せておきます。

Custom Action

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:flutter/services.dart';

Future setPortraitUp() async {
  // Use to set portraitUp
  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
}

main.dartで呼び出す

先ほどの画面の「Custom Files」にmain.dartが含まれています。これをクリックしてください。
右サイドバーから「File Settings」を選択します。
先ほど作成したsetPortraitUpが選択肢にあるので、これを追加します。
こちらもSaveして完了。

さいごに

これで完了です。
FlutterFlowのテスト画面では上手く動作しませんが、端末ではちゃんと動作するので、試してみてください。
このように、CustomActionを使用すると、FlutterFlowが提供している以外の機能も実現できますので、色々試してみてください。

XでもFlutterFlowに関するTipsを掲載予定です。