[flutter] get_it을 이용한 반응형 레이아웃 구현

14 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 get_it을 사용하여 반응형 레이아웃을 구현하는 방법을 알아보겠습니다. get_it은 의존성 관리를 위한 툴로, Flutter 앱에서 상태 관리 및 UI 업데이트를 쉽게 할 수 있게 도와줍니다.

get_it란 무엇인가요?

get_it은 Flutter 앱에서 의존성을 효과적으로 관리하기 위한 패키지입니다. 이를 이용하면 전역적으로 상태를 관리하거나 필요한 인스턴스를 필요한 곳에 쉽게 주입할 수 있습니다.

반응형 레이아웃이란?

반응형 레이아웃은 화면 크기 또는 기기의 유형에 따라 자동으로 레이아웃을 조정하는 디자인 패턴을 말합니다. Flutter에서는 MediaQuery를 이용하여 화면 크기를 감지하고, 이에 따라 UI를 조정할 수 있습니다.

get_it을 이용한 반응형 레이아웃 구현

이제 get_it을 이용하여 반응형 레이아웃을 구현하는 방법을 살펴보겠습니다.

1. get_it 패키지 추가

먼저, pubspec.yaml 파일에 get_it 패키지를 추가합니다.

dependencies:
  get_it: ^7.1.3

2. 의존성 주입

의존성을 주입할 파일에서 get_it을 초기화하고 필요한 인스턴스를 등록합니다.

import 'package:get_it/get_it.dart';

GetIt locator = GetIt.instance;

void setupLocator() {
  locator.registerLazySingleton(() => YourViewModel());
}

3. UI 업데이트

반응형 레이아웃을 구현할 화면에서 MediaQuery를 이용하여 화면 크기에 따른 UI 업데이트를 처리합니다.

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

class YourScreen extends StatelessWidget {
  final viewModel = locator<YourViewModel>();

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Container(
      width: screenWidth > 600 ? 200 : 100, // 예시: 화면 폭이 600 이상이면 너비를 200으로, 아니면 100으로 설정
      height: 100,
      color: Colors.blue,
    );
  }
}

마무리

이렇게 get_it을 이용하여 반응형 레이아웃을 구현할 수 있습니다. get_it을 사용하면 상태 관리나 의존성 주입이 간편해지며, MediaQuery를 이용하여 화면 크기에 따른 UI 업데이트도 쉽게 처리할 수 있습니다.

더 많은 정보를 원하시면 get_it 공식 문서를 참고하세요.

목차