[flutter] 플러터 get과 반응형 디자인

26 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱 개발에서 많이 사용되는 get 패키지를 사용하여 반응형 디자인을 구현하는 방법에 대해 알아보겠습니다.

1. get 패키지란?

get 패키지는 플러터 앱의 상태 관리와 라우팅을 위한 패키지로, 간편한 사용법과 강력한 기능으로 인기를 끌고 있습니다. GetBuilder, GetWidget, GetX와 같은 위젯을 사용하여 상태 관리를 간편하게 할 수 있고, 라우팅 또한 간단하게 구현할 수 있습니다.

2. 반응형 디자인 구현 방법

반응형 디자인은 화면 크기에 따라 레이아웃이 동적으로 변화하도록 하는 것을 말합니다. get 패키지를 활용하여 반응형 디자인을 구현하는 방법은 다음과 같습니다.

2.1. 화면 크기에 따른 레이아웃 조정

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

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GetBuilder<WindowSizeController>(
          builder: (controller) {
            if (controller.isMobile) {
              return MobileLayout();
            } else if (controller.isTablet) {
              return TabletLayout();
            } else {
              return DesktopLayout();
            }
          },
        ),
      ),
    );
  }
}

위 코드는 GetBuilder를 사용하여 WindowSizeController의 화면 사이즈에 따라 다른 레이아웃을 선택하여 화면에 표시합니다.

2.2. 반응형 디자인에 대한 상태 관리

class WindowSizeController extends GetxController {
  RxBool isMobile = false.obs;
  RxBool isTablet = false.obs;
  RxBool isDesktop = false.obs;

  void checkScreenSize(BuildContext context) {
    if (MediaQuery.of(context).size.width < 600) {
      isMobile(true);
    } else if (MediaQuery.of(context).size.width < 1200) {
      isTablet(true);
    } else {
      isDesktop(true);
    }
  }
  
  @override
  void onInit() {
    checkScreenSize();
    super.onInit();
  }
}

위 코드는 WindowSizeController에서 디바이스의 화면 크기에 따라 isMobile, isTablet, isDesktop의 상태를 관리하여 화면의 크기에 따른 레이아웃을 선택할 수 있습니다.

get 패키지를 사용하여 반응형 디자인을 쉽게 구현할 수 있습니다. 앱의 크기에 따라 동적으로 변화하는 레이아웃을 구현하고 싶다면, get 패키지를 활용해보세요.

더 많은 정보를 찾고 싶다면, 아래의 링크를 참고해보세요:

Get 패키지 공식 문서