Inflearn Community Q&A

안녕하세요 Ben Kim님

Flutter에서 기기의 회전 상태는 MediaQuery.of(context).orientation 코드를 이용하여 확인할 수 있습니다. 이를 이용하여 다양하게 구현 하실 수 있는데, 한 가지 예시로 강의에서 사용한 context.layout() 함수에 Orientation 매개변수를 추가하면 다음과 같습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: context.layout(
          (orientation) => Text("Default $orientation"),
          mobile: (orientation) => Text("Mobile : $orientation"),
          desktop: (orientation) => Text("Desktop : $orientation"),
          tablet: (orientation) => Text("Tablet : $orientation"),
        ),
      ),
    );
  }
}

abstract class Breakpoints {
  /// Device max width
  static const double mobile = 600;
  static const double tablet = 1000;
  static const double desktop = 1190;

  /// BottomSheet max width
  static const double bottomSheet = 600;
}

extension LayoutExt on BuildContext {
  /// Screen size
  Size get screenSize => MediaQuery.of(this).size;
  Orientation get orientation => MediaQuery.of(this).orientation;

  /// Responsive layout
  T layout<T>(
    T Function(Orientation orientation) base, {
    T Function(Orientation orientation)? mobile,
    T Function(Orientation orientation)? tablet,
    T Function(Orientation orientation)? desktop,
  }) {
    if (screenSize.width < Breakpoints.mobile) {
      return (mobile ?? base).call(orientation);
    } else if (screenSize.width < Breakpoints.tablet) {
      return (tablet ?? base).call(orientation);
    } else {
      return (desktop ?? base).call(orientation);
    }
  }
}

강의에서 다룬 것과 같이 UI 기획상 가로 모드와 새로 모드의 차이가 어느 정도인지에 따라 위젯을 분리하는 기준이 달라질 수 있으며, 한 파일에 모두 구현하기 보단 유지보수를 위해 별도 위젯으로 나누는 것을 권장드립니다.

감사합니다 🙂

안녕하세요, 인프런 AI 인턴입니다. Ben Kim님,

반응형 UI 설계는 다양한 화면 크기와 방향 변화에 적응할 수 있는 중요한 요소입니다. Flutter에서는 가로모드를 대응할 때 몇 가지 방법을 사용할 수 있습니다.

1. MediaQuery: MediaQuery를 통해 화면의 높이, 너비, 방향 등을 쉽게 알 수 있으며, 이를 이용하여 화면 레이아웃을 조정할 수 있습니다.

   MediaQuery.of(context).orientation == Orientation.portrait
   

   이 코드를 통해 현재 디바이스의 방향을 확인한 후 세로 모드와 가로 모드를 구분할 수 있습니다.

2. LayoutBuilder: LayoutBuilder 위젯을 사용하여 현재 화면의 제약조건을 감지하고 이에 맞춰 위젯을 구성할 수 있습니다. 가로모드에서는 보통 더 많은 공간을 이용하여 추가 정보를 보여주거나 레이아웃을 다양하게 조정할 수 있습니다.

3. Responsive UI 라이브러리: flutter_screenutil 같은 라이브러리를 사용하면 다양한 화면 크기와 방향에 대응하는 반응형 디자인을 더 쉽게 구현할 수 있습니다.

Ben Kim님께서 질문하신 사항과 비슷한 질문에 대한 답변이 아래 링크에 존재합니다.

• ### 디자인 시스템 관련해서 문의드립니다.
  

이 링크에서는 디자인 시스템을 구성하는 데 유용한 여러 가지 팁과 실전 사례에 대해 논의하고 있습니다. 특히 UI 변경에 민감한 Flutter에서 어떤 식으로 접근할 수 있는지 다양한 방법이 제시되어 있으며, 많은 도움이 되실 것이라 생각합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.