4. 플러터 : 텍스트 집합 (Stack)

이전 코드에서는 Text 위젯 하나에 대해서 스타일도 적용하고 했는데
이번에는 여러 개의 Text 위젯을 함께 사용하는 방법에 대해서 보도록 하자.

아래 화면에서 보면, Text 위젯을 3개 만들었음을 알 수 있다.
Text 위젯 하나 만들기가 너무 번거롭기 때문에 추가 함수를 만들어서 쉽게 처리했다.

기존 코드와 달라진 점은
앞서 설명한 것처럼 배경 있는 텍스트를 위한 makeText 함수 사용이다.
build 함수에서 Stack 클래스를 사용해서 3개의 텍스트 위젯을 그룹으로 묶었다.

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 Stack(
            children: <Widget>[
                Positioned(child: makeText('왼쪽', width: 100, height: 50), left: 30,),
                Positioned(child: makeText('오른쪽', width: 100, height: 50), right: 30,),
                Positioned(child: makeText('가운데', width: 100, height: 50), top: 100, left: 100, right: 100,),
            ],
        );
    }
    
    // 텍스트 위치를 확인하기 위해 배경을 갖는 Text 객체 생성
    // {} 안에 만든 매개변수는 매개변수 이름을 사용해서 전달해야 하고
    // 맨 앞의 title은 title 이름 없이 사용할 수 있다.
    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]),
        );
    }
}

Stack 클래스는 절대 좌표를 사용한다.
여러 자식을 갖기 때문에 자식을 가리키는 매개변수의 이름은 children이다.
child인지 children인지 고민하지 않아도 된다.
ch만 입력해도 자동완성되기 때문에 입력할 때는 구분할 필요가 없다.

<Widget>[]는 Widget을 담는 리스트라는 뜻이다.
다트에는 배열 대신 리스트를 사용한다. 리스트이기 때문에 자료형이 달라도 사용할 수 있지만
배열처럼 사용해야 한다면 <Widget>와 같은 템플릿 기능을 사용하면 된다.

Stack 클래스는 수평 요소인 left, right, width, 수직 요소인 top, bottom, height를 멤버로 갖는다.
주의할 점은 각각 3개의 요소 중에 2개만 사용해야 하고 하나는 null로 남겨둬야 한다.
결국 차지할 영역을 지정하는 것인데 3개 모두 지정하면 영역 지정이 불가능해지니까.

텍스트 위젯에는 Stack 클래스에서 위치를 지정하는 기능이 없기 때문에
Positioned 클래스 또는 PositionedDirectional 클래스를 사용해서 위젯을 감싸야 한다.
내가 지정한 크기를 사용하고 싶다면 left나 right에만 값을 주고
변경하고 싶다면 '가운데' 텍스트 위젯처럼 left와 right 모두에 값을 주면 된다.