[flutter] 화면의 가로 및 세로 크기를 가져오기(휴대폰/패드 등)

휴대폰인지 패드인지 확인하기 위한 작업이 필요하다.

다음 코드를 봅시다.

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

해설

MediaQueryData를 사용하여 현재 디바이스의 화면 크기 정보를 가져옵니다.

screenWidth와 screenHeight 변수를 사용하여 화면의 가로 및 세로 크기를 추출합니다.

if 문을 사용하여 화면의 가로 크기(screenWidth)가 600 이상이면 "pad" 아니면 "phone" 출력합니다.

전체소스

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';
 
 
/**
 * https://cholol.tistory.com/568
 * https://newsapi.org/
 * API : cbccb7215b1c41b89976b36fff52509b
 * GET https://newsapi.org/v2/top-headlines?country=us&apiKey=cbccb7215b1c41b89976b36fff52509b
 */
 
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) {
        /*
          javascript send() 클릭시 여기로 전송된다 message 는 json 형태
         */
          _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 에서 접속했습니다. 가로모드만 적용');
 
    } else {
      print('phone 에서 접속했습니다. 세로모드만 적용');
 
    }
    print('>>screenWidth');
    print(screenWidth);
    print(screenHeight);
 
  }
 
}