[flutter] device 정보 가져오기, 화면크기 가져오기

1. device_info_plus 패키지를 이용한 방법(device 정보 가져오기)

 

1-1. 패키지 설치

패키지는 터미널에서 명령어를 아래와 같이 입력하거나

flutter pub add device_info_plus

 pubspec.yaml 파일의 dependencies에 다음과같이 추가한후에 pub get을 눌러준다.

dependencies:
  device_info_plus: ^9.0.3

 

1-2. main.dart에 추가해보기

여러가지 방법이 있겠지만, 앱에 접속 하자마자 device 정보를 얻어오게 하고 싶어서 void main 에 추가했다. 그런데, widget 내부에서 버튼을 누르면 정보가 떨어지게 하는 방법도 있을 것이고...뭐.. 기타등등...

 

여튼 핵심은 플러그인을 객체를 생성해서 실행해주면 된다는 것임.

단 비동기방식으로 실행해야 하기 때문에 void main은 async가 들어가고, deviceInfo를 실행하는 부분이 await가 들어감.

 

전체 코드는 다음과 같다. (웹뷰를 실행하는 코드, 가로모드 방지 코드와 함께 들어가 있음)

import 'package:device_info_plus/device_info_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();

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

  final info = await deviceInfo.deviceInfo;
  print('deviceInfo >>>>>>>>>>>>>>>>>>>>>>');
  print(info.data);
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

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

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

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;
  Uri uri = Uri.parse('https://www.naver.com');

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        uri,
      );
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]); // 가로모드 방지(세로모드 지원)

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

 

 

as-is 코드를 보고 싶다면 이전글에서 확인.

https://kimforest.tistory.com/39

[flutter] 가로모드 방지(화면고정, 세로/가로 고정)

json을 예쁘게 펴보면 이렇게 나온다

 

여기서 객체에 정보를 담아서 사용하면 되게찌!

 

 

근데 화면 너비만 구하고 싶다면 더 간단한 방법으로 출력 할 수 있다. 

 

 

 

2. mediaQueryData 사용하기

 

아래의 코드를 사용하면 된다. 패키지를 설치할 필요는 없다. 

MediaQueryData mediaQueryData = MediaQueryData.fromView(View.of(context));

  조금 더 줄여서

MediaQueryData mediaQueryData = MediaQuery.of(context);  이렇게도 사용 가능함.

다만, 이 메소드는 build(BuildContext context) 안에서 사용하여야 한다. context 인자를 받아야 하기 때문.

 

전체 코드는 다음과 같다.

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]); // 가로모드 방지(세로모드 지원)
    _screenSize();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }

  _screenSize() {
    MediaQueryData mediaQueryData = MediaQueryData.fromView(View.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);
  }
}

 

**터미널에서 출력한 모습**

 

 

 

 

참고 블로그

https://trytoso.tistory.com/1711

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