플러터 - Text Widget

 

본 글은 [Do it! 깡샘의 플러터&다트 프로그래밍] 의 내용을 발췌한 것입니다.

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.

 

Text는 문자열을 출력하는 위젯입니다. 화면을 구성하는 가장 기본 콘텐츠가 문자열이므로 Text 위젯도 플러터에서 가장 많이 활용됩니다. Text는 다음처럼 2가지 생성자를 제공합니다. Text() 생성자는 매개변수로 대입한 문자열을 출력해 주며, Text.rich()는 Text로 출력하는 문자열을 다양하게 꾸밀 수 있습니다.

Text(String data, { ... (생략) .... })
Text.rich(InlineSpan textSpan, { ... (생략) .... })

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.

 

 

 

텍스트 정렬하기 — textAlign

텍스트 위젯에 출력할 문자열을 정렬하려면 textAlign 속성을 이용합니다. 이때 TextAlign 클래스가 제공하는 상수로 가로 방향 정렬 방법을 지정합니다. 상수는 start, end, center, left, right 등을 제공합니다.

Text('Hello World'),
Text(
	'Hello World',
	textAlign: TextAlign.center,
),

텍스트 스타일 지정하기 — TextStyle

문자열을 꾸밀 때는 style 속성에 TextStyle 객체로 지정합니다. TextStyle 생성자에는 문자열의 스타일과 관련된 많은 정보를 설정할 수 있으며 대표적으로 다음과 같은 값을 이용할 수 있습니다.

 

•Color color
•Color backgrondColor
•TextDecoration decoration
•FontWeight fontWeight
•FontStyle fontStyle
•double fontSize
•double height

color와 backgroundColor를 이용하면 문자열이 출력될 곳의 전경색과 바탕색을 지정할 수 있습니다. TextDecoration 클래스의 underline, overline 등의 상수를 decoration에 지정하면 문자열에 줄을 그을 수 있고, 굵게 표시는 fontWeight에 FontWeight.bold를, 기울임꼴로 표시는 fontStyle에 FontStyle.italic을 지정하면 됩니다. 또한 문자열 크기는 fontSize에 지정하며 전체 Text의 세로 크기는 height에 지정합니다.

Text(
	'Hello World',
	style: TextStyle(
		fontWeight: FontWeight.bold, // 굵게
		fontStyle: FontStyle.italic, // 기울임꼴
		color: Colors.red, // 글꼴 색상
		fontSize: 20, // 글꼴 크기
		height: 2, // 세로 크기(줄 간격)
		backgroundColor: Colors.yellow, // 바탕색
		decoration: TextDecoration.underline, // 밑줄 장식
		decorationColor: Colors.red, // 장식 색상
		decorationStyle: TextDecorationStyle.wavy, // 장식 모양(물결)
	),
)

코드에서 height에 대입한 값 2는 fontSize의 2배라는 의미입니다. 문자열의 크기는 fontSize로 지정합니다. height에 지정하는 크기는 문자열의 크기가 아니라 Text 위젯이 세로 방향으로 차지하는 크기이며 fontSize의 배수로 지정합니다. 결국 height의 크기를 이용해 줄 간격을 조정할 수 있습니다.

줄 수 제한하기 — maxLines

텍스트에 긴 문자열을 출력하면 자동으로 줄 바꿈해서 여러 줄로 출력합니다.

만약 특정 줄 수만큼만 출력하고 싶다면 maxLines 속성을 지정합니다. 다음 코드는 maxLines으로 2줄 까지만 출력한 예입니다.

Text(
	longTxt,
	style: TextStyle(
		fontSize: 20
	),
	maxLines: 2,
)

이처럼 문자열이 생략됐음을 알리는 효과를 주고 싶다면 overflow를 이용합니다. overflow에는 TextOverflow 클래스의 4가지 상수 가운데 하나를 사용할 수 있습니다.

•visible: 자동 개행(기본값)
•ellipsis: 말 줄임표(…) 표시
•fade: 흐리게 표시
•clip: 생략 효과 없음

 

Text(
	longTxt,
	style: TextStyle(
		fontSize: 20
	),
	maxLines: 2,
	overflow: TextOverflow.ellipsis,
)

문자열 일부만 꾸미기 — TextSpan

Text의 또 다른 생성자인 Text.rich()는 TextSpan 위젯으로 문자열의 스타일을 지정할 때 사용합니다. 앞에서 살펴본 style 속성은 전체 문자열을 대상으로 하지만, TextSpan은 문자열 중 일부분에만 특정 스타일을 적용하고 싶을 때 사용합니다.
만약 그림과 같은 스타일로 HELLOWORLD 문자열을 출력해야 한다면 Text.rich()로 다음처럼 작성할 수 있습니다.

Text.rich(
	TextSpan(
		text: 'HE',
		children: [
			TextSpan(
				text: 'L',
				style: TextStyle(fontStyle: FontStyle.italic),
				children: [
					TextSpan(text: 'LO'),
					TextSpan(text: 'WO', style: TextStyle(color: Colors.red))
				]
			),
			TextSpan(text: 'RLD', style: TextStyle(fontWeight: FontWeight.bold))
		]
	),
	style: TextStyle(fontSize: 20),
)

Text.rich() 생성자로 작성한 코드를 RichText 위젯으로 작성할 수도 있습니다. 둘 다 TextSpan으로 문자열의 다양한 스타일을 지정할 때 사용합니다. 앞선 코드를 RichText로 다음처럼 작성할 수 있습니다.

RichText(
	text: TextSpan(
		text: 'HE',
		style: TextStyle(fontSize: 20, color: Colors.black),
		children: [
			TextSpan(
				text: 'L',
				style: TextStyle(fontStyle: FontStyle.italic),
				children: [
					TextSpan(text: 'LO'),
					TextSpan(text: 'WO', style: TextStyle(color: Colors.red))
				]),
			TextSpan(
				text: 'RLD',
				style: TextStyle(fontWeight: FontWeight.bold))
			]))

 

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.