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) 표기법을 사용하지. 첫 글자는 소문자, 이후 단어의 첫 글자는 대문자. 알지?