5. 플러터 : 텍스트 집합 (Row, Column)

Stack 클래스는 좌표를 이용해서 추가하고 싶은 곳에 추가할 수 있어서 많이 사용할 것 같지만
실제로는 규칙이 없기 때문에 많이 사용되지 않는다.
수평으로 배치할 것인지(Row 클래스), 수직으로 배치할 것인지(Column 클래스)가 훨씬 중요하다.

아래 그림에서는 3개의 텍스트 위젯을 수평으로 배치했다.
Row 위젯을 사용했다. 행 안에서 어떻게 배치할 것인지 결정하기 때문에 수평이 된다.

Stack 클래스와 사용법은 비슷하다.
다만 Positioned 클래스를 사용해서 위치를 지정할 필요없이 전체에 대해 지정할 옵션만 선택하면 된다.
여기서는 spaceEvenly 옵션을 사용해서 위젯이 동일한 영역을 차지하도록 했다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '멀티 텍스트',
        home: Scaffold(
            appBar: AppBar(title: Text('멀티 텍스트'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Row(
            children: <Widget>[
                makeText('12', width: 100, height: 50),
                makeText('34', width: 100, height: 50),
                makeText('56', width: 100, height: 50),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        );
    }
    
    Widget makeText(String title, {double width, double height}) {
        return Container(
            child: Center(child: Text(title, style: TextStyle(fontSize: 23.0),),),
            width: width,
            height: height,
            decoration: BoxDecoration(color: Colors.red[300]),
            margin: EdgeInsets.all(10.0),
        );
    }
}

mainAxisAlignment 매개변수에 전달되는 값은 규칙에 따라
첫 글자가 대문자인 MainAxisAlignment 클래스(enum) 안에 들어있다.
기본값은 start이기 때문에 옵션을 주지 않으면 왼쪽 경계부터 나란히 배치되는 모습을 보게 된다.

makeText 함수에 추가로 텍스트 위젯 주변에 여백을 줬다.
위젯 바깥 여백을 margin이라 하고, 안쪽 여백을 padding이라고 한다.
여백은 왼쪽, 오른쪽, 위쪽, 아래쪽의 4가지가 있기 때문에 EdgeInsets 클래스를 통해 지정한다.
이 부분은 매개변수 이름하고 같지 않기 때문에 주의가 필요하다.

all 함수는 모든 방향에 대해 같은 값을 준다는 뜻이고,
only 함수를 사용해서 개별적으로 지정할 수도 있다.

만약 Row 위젯이 화면 가운데 오길 바란다면 어떻게 해야 할까?
Center 클래스로 감싸면 끝!

이제 수직으로 배치해 보자.
아래와 같은 결과를 만들려면 Column 클래스를 사용한다.

Column 클래스를 반영했고, 옵션 하나를 추가했다.
행과 열 위젯에서 중요한 개념이 있다.
main은 위젯이 배치되는 방향을 의미하고, cross는 main의 반대 방향을 의미한다.
Row 위젯에서 main은 수평이고 cross는 수직이다.
Column 위젯에서 main은 수직이고 cross는 수평이다.
당연히 수평과 수직에 사용할 수 있는 옵션은 다르다. 이번 예제에서는 cross 옵션으로 stretch를 사용했다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '멀티 텍스트',
        home: Scaffold(
            appBar: AppBar(title: Text('멀티 텍스트'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Column(
            children: <Widget>[
                makeText('12', width: 100, height: 50),
                makeText('34', width: 100, height: 50),
                makeText('56', width: 100, height: 50),
            ],
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
        );
    }
    
    Widget makeText(String title, {double width, double height}) {
        return Container(
            child: Center(child: Text(title, style: TextStyle(fontSize: 23.0),),),
            width: width,
            height: height,
            decoration: BoxDecoration(color: Colors.red[300]),
            margin: EdgeInsets.all(10.0),
        );
    }
}

잘 따라오고 있는지 걱정이 된다.
검증하자. 아래와 같은 화면처럼 출력되도록 코드를 수정하자.