Line Change Text

pub package popularity likes pub points

Flutter에서 정밀한 줄바꿈 제어가 필요한 상황을 위한 스마트 텍스트 위젯입니다. 특정 구분자를 기준으로 텍스트를 분할하면서도 지정된 너비 내에서 최적의 줄바꿈을 자동으로 계산합니다.

문제 상황

Flutter의 기본 Text 위젯은 자동 줄바꿈을 제공하지만, 때로는 우리가 원하지 않는 곳에서 줄이 바뀔 수 있습니다:

// 기본 Text 위젯의 예상치 못한 줄바꿈
Text(
  '새로운 메시지가 도착했습니다. 지금 확인해보세요!',
  style: TextStyle(fontSize: 14),
)
// 결과: "새로운 메시지가 도착했습니다. 지금 확인해보
//        세요!"

이런 상황에서 "확인해보세요"가 두 줄로 나뉘는 것은 가독성을 해치고 사용자 경험을 저하시킵니다.

해결책

LinechangeText 위젯은 실제 텍스트 렌더링 엔진과 동일한 정밀도로 텍스트 너비를 계산하여, 개발자가 지정한 구분자(보통 공백)에서만 줄바꿈이 일어나도록 보장합니다:

LinechangeText(
  totalwidth: 250.0,
  text: '새로운 메시지가 도착했습니다. 지금 확인해보세요!',
  lineChangeText: ' ',
  maxLines: 3,
  textStyle: TextStyle(fontSize: 14),
)
// 결과: "새로운 메시지가 도착했습니다.
//        지금 확인해보세요!"

주요 특징

정밀한 너비 계산: Flutter의 TextPainter를 직접 활용하여 실제 렌더링과 동일한 정확도로 텍스트 너비를 계산합니다.

유연한 구분자 지원: 공백뿐만 아니라 쉼표, 점, 하이픈 등 어떤 문자든 구분자로 사용할 수 있습니다.

기존 Text 속성 호환: maxLines, overflow, textAlign 등 기본 Text 위젯의 모든 속성을 그대로 지원합니다.

다국어 최적화: 한국어, 중국어, 일본어 등 문자마다 너비가 다른 언어에서도 정확한 계산을 제공합니다.

설치

pubspec.yaml 파일에 다음을 추가하세요:

dependencies:
  line_change_text: ^1.0.0

그 다음 패키지를 가져오세요:

flutter pub get

기본 사용법

import 'package:line_change_text/line_change_text.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LinechangeText(
      totalwidth: 250.0,
      text: '안녕하세요! 오늘 하루는 어떠셨나요? 좋은 하루 되세요!',
      lineChangeText: ' ',
      maxLines: 2,
      textStyle: TextStyle(
        fontSize: 16.0,
        color: Colors.black,
      ),
    );
  }
}

고급 사용 예시

쉼표를 구분자로 사용하기

LinechangeText(
  totalwidth: 180.0,
  text: '사과, 바나나, 오렌지, 포도, 딸기, 키위',
  lineChangeText: ',',
  maxLines: 3,
  textStyle: TextStyle(fontSize: 14.0),
)

카드 레이아웃에서 제목 정리하기

Card(
  child: Container(
    width: 200,
    padding: EdgeInsets.all(16),
    child: Column(
      children: [
        LinechangeText(
          totalwidth: 168.0, // 패딩을 고려한 실제 너비
          text: '오늘의 할 일을 모두 완료했습니다! 수고하셨어요.',
          lineChangeText: ' ',
          maxLines: 2,
          textStyle: TextStyle(
            fontSize: 18.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        // ... 다른 내용
      ],
    ),
  ),
)

반응형 디자인에서 활용하기

LayoutBuilder(
  builder: (context, constraints) {
    return LinechangeText(
      totalwidth: constraints.maxWidth * 0.8,
      text: '이 텍스트는 화면 크기에 따라 자동으로 조절됩니다.',
      lineChangeText: ' ',
      maxLines: 3,
      textStyle: TextStyle(fontSize: 16.0),
    );
  },
)

매개변수 설명

매개변수 타입 필수 설명
totalwidth double ✅ 텍스트가 배치될 전체 너비
text String ✅ 표시할 텍스트 내용
lineChangeText String ✅ 줄바꿈 기준이 되는 구분자
maxLines int ✅ 최대 줄 수
textStyle TextStyle ✅ 텍스트 스타일

성능 고려사항

LinechangeText는 정밀한 너비 계산을 위해 TextPainter를 사용합니다. 대부분의 실제 사용 사례에서는 성능에 큰 영향을 주지 않지만, 매우 긴 텍스트를 자주 처리해야 하는 경우 다음을 고려해보세요:

위젯 트리 최적화: 텍스트가 자주 변경되지 않는다면 const 생성자를 사용하여 불필요한 재빌드를 방지할 수 있습니다.

텍스트 길이 제한: 극도로 긴 텍스트보다는 적절한 길이로 나누어 사용하는 것이 좋습니다.

라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

Libraries

line_change_text
text_width