2. 플러터 : 텍스트 스타일 (1)

첫 번째 코드로 텍스트 출력을 봤으니
이번에는 폰트 크기부터 색상까지 다양한 스타일을 적용해 보자.


수정된 부분은 body 매개변수뿐이라고 보면 된다.
제목도 살짝 바꾸긴 했지만 중요하지 않으니까.

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: '텍스트 위젯',
home: MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('텍스트 스타일'),),
body: Center(
child: Text(
'우재야, 안녕!',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 41,
color: Colors.red,
),
),
),
);
}
}

객체를 생성할 때 계속해서 중첩시켜 호출하는 것이 많이 헷갈렸다.
어렵다고 생각하는 건 아니겠지?
다만 지금 와서 보니 좀 길어지더라도
함수 이름을 첫 줄에, 매개변수는 다음 줄에 나열하는 것이 가독성에 좋아 보인다.
appBar 매개변수처럼 간단하다면 한 줄에 사용하기도 하고.

텍스트에 무언가 하고 싶다면 TextStyle 클래스를 style 매개변수로 전달한다.
여기서는 폰트를 굵게, 크기를 41로, 색상을 빨강으로 처리했다.
플러터에서 일관성 때문에 쉽게 코딩할 수 있는 부분이
FontWeight와 Colors 등의 클래스 이름이다.
매개변수 이름은 첫 글자가 소문자, 해당 매개변수에 전달될 값을 갖는 클래스 이름은 첫 글자가 대문자다.
덕분에 이 부분은 외울 필요없이 선택하기만 하면 됐다.

참, 닫는 괄호 뒤에 쉼표(,)가 있을 때도 있고 세미콜론(;)이 있을 때도 있다.
return과 만나면 세미콜론을 사용한다.
다트는 문장의 끝에 세미콜론을 넣어야 하니까.
나머지는 매개변수로 전달됐기 때문에 쉼표를 넣어도 되고 생략해도 된다.

'플러터' 카테고리의 다른 글

5. 플러터 : 텍스트 집합 (Row, Column)  (0) 2019.02.02
4. 플러터 : 텍스트 집합 (Stack)  (0) 2019.02.02
3. 플러터 : 텍스트 스타일 (2)  (0) 2019.02.02
1. 플러터 : 텍스트  (0) 2019.02.01
0. 플러터  (0) 2019.02.01