6. 플러터 : 텍스트 집합(Row + Column)

앱을 만들면서 얼마나 다양한 형태의 디자인을 하게 될 것인지..
Row와 Column에 대해 배웠으니까
이제는 두 개를 결합해서 사용하는 방법에 대해 보자.

우재야!
아래 화면처럼 만들 수 있겠니?
아빠 코드는 아래쪽에 있는데..
먼저 우재가 한번 만들어 보고 아빠꺼랑 비교하면 좋겠어.
도전해 볼까?!

이번 코드는 Row와 Column 클래스의 사용법이라기보다는
코딩에 대한 경험이 더 중요한 것 같아.
이런 문제에서 함수로 정리한다는 생각이 들지 않으면.. 음..

makeRow 함수를 만들었고, 텍스트 3개에 들어갈 문자열을 매개변수로 받았어.
그리고 Column 클래스 생성자에 전달해서 수직으로 배치.
행과 열 모두 균등하게 배치되어야 하니까 spaceEnvely 옵션을 모두 설정하면 끝.

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>[
                makeRow(left: '1', middle: '2', right: '3'),
                makeRow(left: '4', middle: '5', right: '6'),
                makeRow(left: '7', middle: '8', right: '9'),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        );
    }
    
    Widget makeRow({String left, String middle, String right}) {
        return Row(
            children: <Widget>[
                makeText(left, width: 100, height: 100),
                makeText(middle, width: 100, height: 100),
                makeText(right, width: 100, height: 100),
            ],
            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),
        );
    }
}

참.. 다트에서는 변수나 함수 정의할 때 밑줄 문자(_, underscore)를 사용하지 않아.
대신 카멜(camel) 표기법을 사용하지. 첫 글자는 소문자, 이후 단어의 첫 글자는 대문자. 알지?