Flutter의 다양한 화면 크기 지원 방법

Flutter의 다양한 화면 크기 지원 방법

Flutter는 다양한 장치에서 실행될 수 있도록 설계된 크로스플랫폼 프레임워크입니다. 하지만 모바일, 태블릿, 웹, 데스크톱 등 서로 다른 화면 크기에서 일관된 사용자 경험을 제공하려면 반응형 UI를 구현해야 합니다.

이 글에서는 Flutter에서 다양한 화면 크기를 지원하는 주요 방법을 살펴보고, 효과적인 코드 예제와 함께 설명하겠습니다.

---

1. 반응형 UI란?

반응형 UI(Responsive UI)란 화면 크기에 따라 동적으로 레이아웃이 조정되는 UI를 의미합니다. 모바일과 태블릿, 웹 환경에서 동일한 앱을 실행할 때 적절한 UI가 자동으로 적용되어야 합니다.

Flutter에서 반응형 UI를 만들기 위해 활용할 수 있는 대표적인 방법은 다음과 같습니다.

• MediaQuery를 이용한 화면 크기 감지
• LayoutBuilder를 활용한 위젯 크기 조정
• Flexible 및 Expanded을 사용한 동적 크기 조정
• 패키지를 활용한 반응형 디자인

---

2. MediaQuery를 사용한 반응형 UI

MediaQuery는 Flutter에서 현재 디바이스의 화면 크기를 가져오는 방법 중 하나입니다. 이를 활용하면 화면 크기에 따라 레이아웃을 동적으로 변경할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveScreen(),
    );
  }
}

class ResponsiveScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: Text('MediaQuery 반응형 UI')),
      body: Center(
        child: Text(
          '화면 너비: ${screenWidth.toStringAsFixed(2)} px',
          style: TextStyle(fontSize: screenWidth * 0.05),
        ),
      ),
    );
  }
}

위 코드에서는 MediaQuery.of(context).size.width를 사용하여 화면의 너비를 가져오고, 이에 따라 텍스트 크기를 동적으로 조정합니다.

---

3. LayoutBuilder를 활용한 반응형 UI

LayoutBuilder를 사용하면 특정 위젯의 부모 컨테이너 크기를 기준으로 동적인 레이아웃을 구성할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('LayoutBuilder 예제')),
        body: LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth > 600) {
              return Center(
                child: Text('태블릿 레이아웃', style: TextStyle(fontSize: 24)),
              );
            } else {
              return Center(
                child: Text('모바일 레이아웃', style: TextStyle(fontSize: 18)),
              );
            }
          },
        ),
      ),
    );
  }
}

위 코드에서는 constraints.maxWidth 값을 확인하여 태블릿(600px 이상)과 모바일 화면에서 서로 다른 텍스트 스타일을 적용합니다.

---

4. Flexible 및 Expanded 활용

Flexible과 Expanded 위젯을 사용하면 화면 크기에 따라 UI 요소가 적절히 확장되거나 축소되도록 만들 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flexible & Expanded 예제')),
        body: Column(
          children: [
            Expanded(
              child: Container(color: Colors.blue),
            ),
            Flexible(
              child: Container(color: Colors.red, height: 100),
            ),
            Expanded(
              child: Container(color: Colors.green),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 Expanded를 사용하여 화면의 남은 공간을 자동으로 채우고, Flexible을 사용하여 특정 높이를 유지하도록 설정했습니다.

---

5. 패키지를 활용한 반응형 UI

Flutter에서 반응형 UI를 쉽게 구현할 수 있도록 돕는 여러 패키지가 있습니다. 대표적인 패키지는 다음과 같습니다.

• flutter_screenutil: 화면 크기에 따라 자동으로 UI 크기를 조정
• responsive_builder: 화면 크기에 따라 다른 위젯을 적용

(1) flutter_screenutil 사용 예제

flutter_screenutil 패키지를 사용하면 다양한 화면 크기에서 자동으로 UI 크기를 조정할 수 있습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 690), // 기본 디자인 크기
      builder: () => MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('ScreenUtil 예제')),
          body: Center(
            child: Text(
              '반응형 텍스트',
              style: TextStyle(fontSize: 20.sp), // sp 단위 사용
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 20.sp를 사용하면 화면 크기에 맞게 텍스트 크기가 자동 조정됩니다.

---

결론

Flutter에서 다양한 화면 크기를 지원하는 방법에는 여러 가지가 있습니다.

• MediaQuery를 사용하여 화면 크기와 방향을 감지
• LayoutBuilder를 활용하여 동적 UI 적용
• Flexible과 Expanded을 사용하여 유동적인 레이아웃 구성
• 패키지를 사용하여 화면 크기에 따라 자동으로 UI 조정

위 방법들을 적절히 활용하면 다양한 장치에서도 일관된 사용자 경험을 제공할 수 있습니다. 이제 반응형 UI를 적용하여 더욱 완성도 높은 Flutter 앱을 만들어 보세요!