[flutter] 화면 방향을 세로/가로 고정 방법

// 화면 방향을 세로모드로 고정합니다.
void setOrientationVertical(BuildContext context) {
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
}

// 화면 방향을 가로모드로 고정합니다.
void setOrientationHorizontal(BuildContext context) {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
}

 

위의 코드는 Flutter 앱에서 화면 방향을 제어하기 위해 사용되는 함수들을 정의하고 있습니다. 

이러한 함수들은 SystemChrome 클래스를 사용하여 화면 방향을 설정하고 고정시키는 데 사용됩니다. 

코드는 다음과 같이 두 가지 함수로 구성되어 있습니다:

setOrientationVertical(BuildContext context): 

이 함수는 화면 방향을 세로 모드로 고정하기 위해 사용됩니다. 

세로 모드로 고정하면 앱은 세로 방향으로만 화면을 표시합니다. 

함수 내에서는 SystemChrome.setPreferredOrientations 메서드를 호출하여 DeviceOrientation.portraitUp 값을 전달하여 세로 방향을 고정합니다. 

이것은 기기가 눕힌 상태(세로 방향)로 고정됨을 의미합니다.

setOrientationHorizontal(BuildContext context): 

이 함수는 화면 방향을 가로 모드로 고정하기 위해 사용됩니다. 

가로 모드로 고정하면 앱은 가로 방향으로만 화면을 표시합니다. 

함수 내에서는 SystemChrome.setPreferredOrientations 메서드를 호출하여 DeviceOrientation.landscapeLeft와 DeviceOrientation.landscapeRight 값을 전달하여 가로 방향을 고정합니다. 이것은 기기가 세로로 서 있는 상태(가로 방향)로 고정됨을 의미합니다.

이러한 함수들을 사용하면 Flutter 앱의 화면 방향을 제어할 수 있으며, 사용자 경험을 향상시키거나 특정 화면에서만 특정 방향을 허용하는 데 유용합니다.

전체소스

import 'dart:convert';

import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:http/http.dart' as http;

import 'package:webview_flutter_onlyweb/providers/news_provider.dart';
import 'models/news.dart';



Future<void> main() async {
  await initialization(null);

  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

Future initialization(BuildContext? context) async {
  await Future.delayed(const Duration(seconds: 0));
}


class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}



class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..addJavaScriptChannel('JsBridge', onMessageReceived: (JavaScriptMessage message) {
          _web2flutter(message);
        })
      ..setUserAgent("naya mobiie_wv")
      ..loadRequest(
        Uri.parse('http://220.72.212./flutter_index2.html'),
      );

    NewsProvider newsProvider = NewsProvider();
    newsProvider.postRequest();

  }



  _web2flutter(JavaScriptMessage message) async {

    /*
     * json 형태를 객체로 변경
     */

    Map<String, dynamic> parsedJson = jsonDecode(message.message);

    var action = parsedJson['action'];
    var inputHexString = parsedJson['hexString'];
    print('acton:'+action);
    print('inputHexString:'+inputHexString);

    var receivedHexString = '';

    _flutter2web('플러터에서 보낸 메세지 입니다. ');
  }

  // flutter -> web 전송
  _flutter2web(msg) async {
    controller.runJavaScript("flutter2web('$msg')");
  }

  dd(String str) {
    if (kDebugMode) {
      print(str);
    }
  }

  @override
  Widget build(BuildContext context) {

    _screenSize();

    return Scaffold(
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }

  _screenSize() {
    MediaQueryData mediaQueryData = MediaQuery.of(context);

    // 화면의 가로 및 세로 크기를 가져옵니다.
    double screenWidth = mediaQueryData.size.width;
    double screenHeight = mediaQueryData.size.height;
    if(screenWidth > 600)  {
      print('pad 에서 접속했습니다. 가로모드만 적용');
      setOrientationHorizontal(context);

    } else {
      print('phone 에서 접속했습니다. 세로모드만 적용');
      setOrientationVertical(context);
    }
    print('>>screenWidth');
    print(screenWidth);
    print(screenHeight);

  }

}

// 화면 방향을 세로모드로 고정합니다.
void setOrientationVertical(BuildContext context) {
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
}

// 화면 방향을 가로모드로 고정합니다.
void setOrientationHorizontal(BuildContext context) {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
}