Flutter에서 auto_size_text 패키지 사용법 및 옵션 가이드

Flutter는 다양한 UI 요소를 효율적으로 관리할 수 있는 프레임워크로, 텍스트 크기 조정은 특히 중요한 부분입니다. auto_size_text 패키지는 텍스트의 크기를 자동으로 조정하여 주어진 영역에 맞출 수 있도록 도와줍니다. 이 블로그에서는 auto_size_text 패키지의 사용법과 옵션에 대해 자세히 알아보겠습니다.

1. auto_size_text 패키지란?

auto_size_text 패키지는 Flutter에서 텍스트가 주어진 공간에 자동으로 맞춰지도록 크기를 조정해주는 패키지입니다. 화면 크기나 텍스트 길이에 따라 동적으로 텍스트 크기를 조정하여 UI가 깨지지 않고 적절하게 표시되도록 합니다.

2. auto_size_text 패키지 설치하기

먼저 auto_size_text 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가합니다

dependencies:
  flutter:
    sdk: flutter
  auto_size_text: ^3.0.0

추가한 후, 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다:

flutter pub get

3. 기본 사용법

auto_size_text를 사용하여 텍스트를 자동으로 조정하는 방법은 매우 간단합니다.

AutoSizeText 위젯을 사용하여 텍스트를 감싸면 됩니다.

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

class AutoSizeTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Auto Size Text Example')),
      body: Center(
        child: AutoSizeText(
          '이 텍스트는 자동으로 크기가 조정됩니다.',
          style: TextStyle(fontSize: 30),
          maxLines: 2,
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: AutoSizeTextExample()));
}

위의 예제에서 AutoSizeText 위젯을 사용하여 텍스트가 주어진 공간에 맞게 크기가 조정되도록 했습니다.

maxLines 속성은 텍스트가 차지할 최대 줄 수를 지정합니다.

4. 주요 옵션 및 속성

auto_size_text 패키지는 다양한 옵션과 속성을 제공합니다. 몇 가지 주요 옵션에 대해 알아보겠습니다.

4.1 minFontSize 및 maxFontSize

minFontSize와 maxFontSize 속성을 사용하여 텍스트 크기의 최소 및 최대 값을 설정할 수 있습니다.

AutoSizeText(
  '이 텍스트는 최소 18, 최대 30 크기로 조정됩니다.',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxFontSize: 30,
  maxLines: 2,
)

4.2 presetFontSizes

presetFontSizes 속성은 텍스트 크기를 조정할 때 사용할 글꼴 크기 목록을 설정할 수 있습니다.

AutoSizeText(
  '이 텍스트는 미리 설정된 글꼴 크기를 사용합니다.',
  style: TextStyle(fontSize: 30),
  presetFontSizes: [30, 25, 20, 15],
  maxLines: 2,
)

4.3 stepGranularity

stepGranularity 속성은 텍스트 크기를 조정할 때의 단계 크기를 설정합니다. 기본값은 1.0입니다.

AutoSizeText(
  '이 텍스트는 0.5 크기 단위로 조정됩니다.',
  style: TextStyle(fontSize: 30),
  stepGranularity: 0.5,
  maxLines: 2,
)

4.4 wrapWords

wrapWords 속성은 텍스트가 주어진 공간에 맞지 않을 때 단어 단위로 줄바꿈을 할지 여부를 설정합니다. 기본값은 true입니다.

AutoSizeText(
  '이 텍스트는 단어 단위로 줄바꿈을 하지 않습니다.',
  style: TextStyle(fontSize: 30),
  wrapWords: false,
  maxLines: 2,
)

5. 고급 사용법

5.1 Rich Text 지원

auto_size_text 패키지는 RichText를 지원합니다. 이를 통해 텍스트의 일부만 스타일을 지정할 수 있습니다.

AutoSizeText.rich(
  TextSpan(
    text: '이 텍스트는 ',
    children: [
      TextSpan(
        text: '부분적으로 스타일이 지정됩니다.',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
      ),
    ],
  ),
  style: TextStyle(fontSize: 30),
  maxLines: 2,
)

5.2 FittedBox와 함께 사용

FittedBox와 함께 사용하여 텍스트를 부모 위젯의 크기에 맞출 수 있습니다.

FittedBox(
  child: AutoSizeText(
    '이 텍스트는 FittedBox와 함께 사용됩니다.',
    style: TextStyle(fontSize: 30),
    maxLines: 1,
  ),
)

결론

auto_size_text 패키지는 Flutter에서 텍스트 크기를 자동으로 조정하여 다양한 화면 크기와 텍스트 길이에 적응할 수 있도록 도와주는 강력한 도구입니다.

위에서 소개한 다양한 옵션과 속성을 활용하여, 텍스트 크기를 조정하는 작업을 효율적으로 처리할 수 있습니다.

이 패키지를 사용하여 Flutter 애플리케이션의 텍스트가 항상 적절하게 표시되도록 하고, 사용자에게 최적의 경험을 제공할 수 있기를 바랍니다.

 

 

 

수발가족을 위한 일기장 “나비일기장”

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

카카오톡 대화방

https://open.kakao.com/o/gsS8Jbzg