[Flutter][Widget] Text 위젯

개요

---

글자를 보여준다는 것은 프로그램의 가장 기초적인 부분이다.

Flutter에서는 Text 라는 위젯을 통해 이를 보여준다.

Text 외의 다른 위젯도 있지만, 이번 포스트에서는 가장 기초적인 위젯인 Text위젯을 볼 것이다.

 

 

Text란?

---

 

`Text`는 이름 그대로 문자를 보여주는 위젯으로 원하는 문자열을 화면에 그려준다.

 

Text 사용예시

Text("안녕하세요 노근입니다.")

 

`Text` 위젯은 위와 같이 간단하게 사용할 수 있다.

`Text("원하는 문자열")`의 형태로 가볍게 사용할 수 있다. ▼

Text 위젯 사용 예시

 

style 프로퍼티 (TextStyle)

---

 

 

"근데 폰트 크기가 더 크거나, 색이 달랐으면 좋겠는데?"

 

 

그럴 때는 `style` 프로퍼티에 `TextStyle` 에 필요한 프로퍼티들을 채운뒤 넣어주면 된다.

Text(
  "안녕하세요 노근입니다.",
  style: TextStyle(/*프로퍼티*/),
),

 

하지만 위와 같이 코드를 작성하고 TextStyle의 프로퍼티들을 보니, 그 수가 엄청나게 많은 것을 알 수 있다. ▼

너무 많아요...

 

하나하나 다 보기엔 양이 너무 많으니 간단하게 많이 사용하는 프로퍼티들만 보자.

 

fontSize

`fontSize`는 이름 그대로 폰트 크기를 조절하는 프로퍼티로 `double`을 받는다.

값을 넣지 않으면 14로 기본 설정이 된다.

 

fontWeight

`fontWeight`는 폰트의 굵기를 조절하는 프로퍼티로 `FontWeight` 인스턴스를 받는다.

Flutter에서 `fontWeight`와 관련된 요소들을 `w100`부터 `w900`으로 정의해놓았기에 우리는 아래의 형태로 사용할 수 있다. ▼

fontWeight: FontWeight.w800

 

`w100`부터 `w900`까지 굵어지며, 기본적으로 `w400`이 normal, `w700`이 bold로 잡혀있다.

 

color

`color`는 폰트의 색상을 지정하는 프로퍼티로 `Color` 인스턴스를 받는다.

`Flutter`에서 기본으로 `Color`값들을 정의해놓았기에 우리는 아래의 형태로 사용할 수 있다. ▼

color: Colors.blue,

 

VScode에서 Flutter 확장을 사용하면 아래와 같이 자동완성시 색상을 알려준다. ▼

 

backgroundColor

`backgroundColor`는 폰트의 배경색을 지정하는 프로퍼티로 위의 `color`와 같이 `Color` 인스턴스를 받는다.

backgroundColor: Colors.black,

 

fontFamily

`fontFamily`는 Flutter에서 기본 제공하는 폰트 외의 폰트를 pubspec.yaml에 지정했을 때, 이를 적용할 수 있게 도와주는 프로퍼티이다.

String을 받으며, 내가 추가한 `fontFamily`의 이름을 넣으면 된다. ▼

fontFamily: "Pretendard"

 

만약에 해당되는 `fontFamily`가 없다면 기본 폰트인 Roboto가 적용된다.

 

적용 예제

아래의 코드를 실행시키면, ▼

Text(
  "안녕하세요 노근입니다.",
  style: TextStyle(
    fontSize: 50,
    fontWeight: FontWeight.w800,
    fontFamily: "font-family",
    color: Colors.blue,
    backgroundColor: Colors.black,
  ),
)

 

이렇게 나온다. ▼

fontFamily는 없으므로 기본 폰트가 나온다.

 

 

이걸 매번 적용해줘야해?

이쯤 보면 한가지 의문이 들 수 있다.

이 수많은 프로퍼티들을 매번 타이핑하여 적용해야한다면 상당히 번거로운 작업이 되지 않을까 하는 의문이 들 것이다.

 

다행인 것은 그렇게 하지 않아도 된다는 것이다.

재사용성은 충분히 보장된다.

TextStyle도 하나의 인스턴스로 들어가기에 사전에 디자이너가 정의한 폰트스타일들을 미리 저장해두고 사용할 수 있다. ▼

class AppTextStyles {
  static const double _baseLetterSpacing = -0.5;

  static TextStyle _baseStyle(double size, FontWeight weight) {
    return TextStyle(
      fontSize: size,
      fontWeight: weight,
      letterSpacing: _baseLetterSpacing,
    );
  }

  static final TextStyle testStyle1 = _baseStyle(12, FontWeight.w700);
  static final TextStyle testStyle2 = _baseStyle(14, FontWeight.w700);
  static final TextStyle testStyle3 = _baseStyle(16, FontWeight.w700);
}

 

이렇게 하면 `AppTextStyles.testStyle1`과 같이 미리 정의된 TextStyle들을 사용할 수 있다.

 

 

TextAlign + TextDirection

---

`Text`위젯에 개행이 들어간 문자를 넣으면 아래와 같이 그려진다. ▼

Text("Hello\nI'm Gorani")

 

 

"Text는 왼쪽 정렬밖에 안되는건가? 가운데 정렬로 하고 싶은데..."

 

`Text`를 정렬하기 위해서는 `textAlign` 프로퍼티를 채워야한다.

약간 헷갈릴 수 있는게, `textAlign`은 `TextStyle`의 프로퍼티가 아니라 `Text`자체의 프로퍼티이다.

 

TextAlign의 enum

`textAlign`은 `TextAlign` enum을 받고, `TextAlign` enum에는 `center`, `end`, `justify`, `left`, `right`, `start`가 있다. ▼

 

각 enum들을 넣으면 어떻게 되는 지 확인해보자.

 

center

가장 먼저 `center` enum을 보자.

`center`를 넣으면 이름 그대로 가운데 정렬이 된다. ▼

 

위젯 사이즈 내부에서 가운데로 정렬이 되기 때문에, 이렇게 개행이 있는게 아닌 상태에서 `center`를 사용하면 별 다른 일이 일어나지 않는 것 처럼 보일 수 있다.

 

start

다음은 `start` enum.

시작 지점부터 문자를 정렬해준다. ▼

 

 

end

`end` enum은 끝 지점부터 문자를 정렬해준다. ▼

 

 

justify

justify는 양쪽을 맞추어 정렬한다.

하지만 문자의 길이가 충분히 길지 않다면 이는 동작하지 않는다. ▼

 

 

left

`left`는 이름 그대로 왼쪽을 맞추어 정렬한다. ▼

 

 

right

`right`는 이름 그대로 왼쪽을 맞추어 정렬한다. ▼

 

 

start와 left, end와 right의 차이? == TextDirection

여기까지 보면 start랑 left, 그리고 end와 right는 사실상 똑같이 동작하는걸 알 수 있다.

똑같은 걸 왜 나눠놓은건가... 할 수 있는데, 둘은 명확한 차이가 존재한다.

 

우리는 왼쪽에서 오른쪽으로 읽는게 기본이지만, 아랍권에서는 오른쪽에서 왼쪽으로 읽는게 기본이다.

이런 경우 start는 왼쪽이 아니라 오른쪽이 되게 된다.

 

즉, start와 end는 나라권마다, 설정마다 달라질 수 있다.

다른 의미로는 textDirection이라는 속성을 따라가게 된다.

아래와 같이 코드를 짜게 되면, ▼

Text(
  "Hello, I'm Gorani.\nNice to meet you all.",
  textAlign: TextAlign.start,
  textDirection: TextDirection.rtl,
),

 

start지만 오른쪽부터 시작하게 된다. ▼

 

rtl, ltr

TextDirection도 enum이며, rtl과 ltr로 구성된다.

rtl은 오른쪽부터 왼쪽, ltr은 왼쪽부터 오른쪽의 방향을 의미한다.

 

 

마치며

---

여기까지 조금은 길지만, `Text` 위젯에 대해 알아보았다.

글의 분량을 보면 '아니 알아야할 게 왤캐 많아' 할 수 있는데, 막상 보면 별 거 없다.

직접 써보면 그냥 자연스럽게 물 흐르듯 알게 되기도 하고, 상식적으로 사용하면 어려울게 전혀 없다...고 생각하지만 막상 처음 접하면 아닐 수 있으니 직접 써보는걸 권한다.