[flutter] device_info 라이브러리를 이용하여 디바이스의 스크린이 대화 상자를 가릴 정도로 작은지 확인하기

30 Nov 2023

flutter

Flutter 애플리케이션을 개발할 때, 디바이스의 스크린이 작을 경우 대화 상자(dialog)를 사용하는 것이 좋습니다. 이러한 작업을 수행하기 위해 device_info라이브러리를 사용할 수 있습니다. device_info 라이브러리는 다양한 디바이스 정보에 액세스할 수 있도록 도와주는 Flutter 패키지입니다.

device_info 라이브러리 추가하기

pubspec.yaml 파일의 dependencies 섹션에 device_info 패키지를 추가해야 합니다. 아래와 같이 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  device_info: ^2.0.2

설정이 완료되면 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

스크린 크기 확인하기

device_info 패키지를 사용하여 디바이스의 스크린 크기를 확인할 수 있습니다. 이를 통해 대화 상자를 가릴 정도로 작은 화면인지 확인할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:device_info/device_info.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Screen Size Checker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScreenSizeChecker(),
    );
  }
}

class ScreenSizeChecker extends StatefulWidget {
  @override
  _ScreenSizeCheckerState createState() => _ScreenSizeCheckerState();
}

class _ScreenSizeCheckerState extends State<ScreenSizeChecker> {
  bool isScreenSmall = false;

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

  Future<void> checkScreenSize() async {
    DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
    AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
  
    double screenWidth = androidInfo.screenWidth.toDouble();
    double screenHeight = androidInfo.screenHeight.toDouble();

    if (screenWidth <= 320 || screenHeight <= 480) {
      setState(() {
        isScreenSmall = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen Size Checker'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (isScreenSmall)
              Text(
                'Your screen size is too small for dialog.',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                ),
              ),
            Text(
              'Screen Size: ${MediaQuery.of(context).size}',
              style: TextStyle(
                fontSize: 16.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ScreenSizeChecker 위젯은 device_info 패키지를 사용하여 디바이스의 스크린 크기를 확인하고, 작은 크기인 경우에는 메시지를 화면에 표시합니다. main 함수에서 runApp 함수를 사용하여 MyApp 위젯을 실행합니다.

애플리케이션을 실행하면 현재 디바이스의 스크린 크기를 확인하고, 대화 상자를 가릴 정도로 작다면 해당 메시지가 표시됩니다.

참고 자료

device_info 패키지 - pub.dev