[ Flutter ] Text Widget 테두리 색 내부 색 변경

외부에서 font를 사용하는 과정에서 font size가  큰 상태에서 bold속성을 주면 fontColor가 정상적으로 채워지지 않는 경우가 발생

 

이것처럼 텍스트의 외곽선이 안채워져서 비어있는 느낌이 나는 경우가 발생

 

이를 해결하기위해 테두리도 함께 색을 변경해주기 위해

foreground 속성을 사용하여 테두리크기와 색을 변경해주었지만

이 경우에는 내부 색은 채워지지 않는 상황이 발생

 

찾아보니 Text의 경우 테두리 색과 글자색을 동시에 변경을 할 수 없다고 하여

테두리 색과 글자색을 개별로 만들어줘서 합쳐줘야한다.

---

Useage

이렇게 Stack을 활용하여 두개의 Text를 겹쳐주어 하나에는 외곽선 스타일을 다른 Text에는 내부 글자 색상을 넣어주도록 위젯을 생성

 

return Stack(
      children: [
        // 외곽선 텍스트
        Text(
          text,
          style: TextStyle(
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = 1.2
              ..color = color, // 외곽선 색상
            fontSize: 20.0,
          ),
        ),
        // 내부 채우기 텍스트
        Text(
          text,
          style: TextStyle(
            color: color, // 내부 채울 색상
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );

 

이후 OutLineText위젯을 만들어서

text와 color , fontSize, strokeSize를 입력받아 자유롭게 변경이 가능하도록 위젯을 구성

 

그럼 이렇게 깔끔하게 두껍게 되며 외곽선과 내부 색상이 정상적으로 적용된 것을 확인

[ 전체코드 ]

import 'package:flutter/material.dart';

class OutLineText extends StatefulWidget {
  String text;
  Color color;
  double fontSize;
  double strokeSize;

  OutLineText(
      {required this.text,
      required this.color,
      required this.fontSize,
      required this.strokeSize,
      super.key});

  @override
  State<OutLineText> createState() => _OutLineTextWidgetState();
}

class _OutLineTextWidgetState extends State<OutLineText> {
  @override
  Widget build(BuildContext context) {
    String text = widget.text;
    Color color = widget.color;
    double fontSize = widget.fontSize;
    double strokeSize = widget.strokeSize;

    return Stack(
      children: [
        // 외곽선 텍스트
        Text(
          text,
          style: TextStyle(
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = strokeSize
              ..color = color, // 외곽선 색상
            fontSize: fontSize,
          ),
        ),
        // 내부 채우기 텍스트
        Text(
          text,
          style: TextStyle(
            color: color, // 내부 채울 색상
            fontSize: fontSize,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}