[Package] FontSize 맞춤 위젯 개발

Flutter를 이용해서 개발하다보면 기본 Text Widget은 항상 아쉬운 면이 있어서 커스터마이징해보았다.

---

내가 느낀 아쉬운점

• 부모 Widget의 크기보다 글자가 커지면 Overflow되어 신경쓰지 않는다면 원치않는 결과가 출력됨
• 부모 영역의 크기가 주어지지 않는다면 글자크기만큼 한없이 커짐

개선점

• 설정한 fontSize보다 Text가 위치할 영역이 작아 Text를 모두 표현하지 못하는 경우가 발생한다면 자동으로 fontSize를 조절함
• 부모 영역이 없더라도 설정한 fontSize 등에 맞춰 fontSize를 조절함
• (보너스) word-break 기능을 넣어두어 단어잘림현상을 방지함

Pub.dev

size_tailored_text

설치방법

dependencies:
  size_tailored_text: {version}

사용법

SizeTailoredText Widget의 사용법은 Text에서 쉬운 마이그레이션을 지향하여 기본 Text Widget을 따라갑니다.

SizeTailoredText(
    text: "String",
    textStyle: TextStyle(...),
    maxLines: 5,    //default 1
);

적용예시

적용한 모습

Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
        const SizeTailoredText(
            text: text,
            textStyle: style,
            maxLines: 5,
        ),
        borderContainer(const Text(text, style: style)),
        borderContainer(const SizeTailoredText(
            text: text,
            textStyle: style,
            maxLines: 5,
        ))
    ],
);

Widget borderContainer(Widget child) => Container(
    width: double.infinity,
    height: 200,
    decoration: const BoxDecoration(
        border: Border.fromBorderSide(BorderSide(color: Colors.red))),
    child: child,
);

borderContainer는 일반 Text와 같은 영역을 지정하기 위해 임의로 만든 부모 위젯임.