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

텍스트의 배경을 바꾸고 싶어졌다.
그런데 이게 잘 되지 않았다.
Text 클래스는 말 그대로 텍스트에만 신경쓰고 나머지는 몰라라 했다.
이럴 때 사용하는 클래스로 Container 클래스가 있다.
매개변수로는 child가 있기 때문에 자식은 하나밖에 갖지 못한다.

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: Container(
                    child: Text(
                        '우재야, 안녕!',
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 41,
                            color: Colors.red,
                        ),
                        textAlign: TextAlign.center,
                    ),
                    decoration: BoxDecoration(
                        color: Colors.green[300],
                        borderRadius: BorderRadius.all(Radius.circular(15.0)),
                    ),
                    width: 300.0,
                    height: 100.0,
                ),
            ),
        );
    }
}

코드 중간에 Container 클래스 생성자에 전달한 매개변수는 몇 개일까?
일단 child가 있고 child와 같은 줄에 decoration과 width, height가 있다. 총 4개.
그래서 줄을 맞추는 것이 중요하다.

decoration 매개변수를 사용해서 텍스트에 장식을 한다.
컨테이너의 색상은 텍스트의 배경색이 되고, 컨테이너 모서리를 둥글게 처리했다.
클래스가 여럿 들어가기는 하지만 이건 장점으로 봐야 한다.
단순하게 숫자를 쓰는 것보다 의미가 훨씬 분명하다.

참, 텍스트 자체의 정렬을 처리하기 위해 Text 클래스 생성할 때
추가로 textAlign 매개변수 전달했다.

하나 더.
색상을 지정할 때 green[300]이라고 했는데
green이 정의된 Colors 클래스로 이동해 보면(맥에서는 cmd + 마우스 왼쪽, 윈도우는 ctrl을 사용하던가..)
사전(map, 딕셔너리) 형태로 구성된 클래스라는 것을 알 수 있다.
[] 안에 들어가는 숫자들이 100부터 900까지 100 단위로 모두 정의되어 있기 때문에
green[300]은 키(key)가 300인 초록색을 사용하겠다는 뜻이 된다.
그냥 초록색은 green을 사용하면 되고 같은 뜻으로 green[500]을 사용할 수 있다.

의도한 대로 나오기는 했지만
수평으로만 정렬됐고 수직으로는 정렬되지 않았다.

이번에는 우리 아들을 위해 문제 하나 주고 답은 보여주지 않는다.
이번 코드를 수정해서 수직으로도 가운데 오도록 만들어 보자.
우재, 화이팅!!