목표
Flutter의 주요 위젯인 Text, Button, Row, Column을 알아보고 이를 활용하여 간단한 UI를 구성합니다.
1.1 소개
Flutter에서 UI는 위젯으로 구성됩니다. Text, Button, Row, Column은 Flutter의 가장 기본적인 위젯으로, UI를 배치하고 상호작용을 구현할 때 자주 사용됩니다. 이번에는 위젯들을 알아보고 간단한 레이아웃을 만들어 보겠습니다.
1.2 사전 준비
- Flutter 개발 환경이 준비되어 있어야 합니다.
- 이전 단계에서 만든 프로젝트(또는 새 프로젝트)를 열어야 합니다.
이전 단계를 진행하지 않았다면 아래 버튼을 눌러 이전 단계를 완료하세요.
1.2 핵심 내용
1단계: Text 위젯
Text 위젯은 화면에 텍스트를 출력합니다. 이전 단계에서 작성한 hello_flutter 또는 새로운 프로젝트를 생성한 후 다음과 같이 작성합니다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Text 위젯')),
body: const Center(
child: Text(
'Flutter는 재미있어요!',
style: TextStyle(fontSize: 24, color: Colors.blue),
),
),
),
);
}
}
결과:
- 텍스트 내용: “Flutter는 재미있어요!” 문구가 출력.
- 스타일: 폰트 크기 24, 텍스트 색상 파란색.
2단계: ElevatedButton 위젯
ElevatedButton은 클릭 가능한 버튼을 생성합니다. 다음과 같이 소스코드를 변경하여 어떻게 변화되는지 확인해 보세요.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Button 위젯')),
body: Center(
child: ElevatedButton(
onPressed: () {
print('버튼 클릭됨');
},
child: const Text('클릭하세요'),
),
),
),
);
}
}
결과:
- 버튼 텍스트:”클릭하세요”.
- 클릭 이벤트: 버튼을 클릭하면 “버튼 클릭됨”이 콘솔에 출력됩니다.
3단계: Row와 Column 위젯
Row는 가로 방향, Column 세로 방향 위젯을 배치합니다.
다음과 같이 소스코드를 수정해 보세요.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Row와 Column 위젯')),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Text('Row 1'),
Text('Row 2'),
Text('Row 3'),
],
),
const SizedBox(height: 20), // 간격 추가
const Text('Column Text 1'),
const Text('Column Text 2'),
],
),
),
);
}
}
결과:
- Row: “Row 1”, “Row 2”, “Row 3” 텍스트가 가로로 정렬.
- Column: “Column text 1”, “Column text 2” 텍스트가 세로로 정렬.
- 정렬 방식: mainAxisAlignment를 사용하여 정렬.
1.4 실습
1단계: Text 스타일 추가
- Text 위젯에 폰트 굵기, 배경색, 글꼴 스타일을 추가해 보세요.
2단계: Row와 Column 혼합
- Row 내부에 Column을 추가하여 복잡한 레이아웃을 만들어 보세요.
3단계: 버튼 클릭 이벤트
- 버튼을 클릭하면 화면에 “Hello, World!”가 나타나도록 구현 해보세요.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
String txt1 = 'Change Text 1';
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Row와 Column 위젯')),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
style: TextStyle(fontSize: 30, color: Colors.blue),
'text 1 '),
Text(
style: TextStyle(fontSize: 30, color: Colors.red),
'text 2 '),
Text(
style: TextStyle(fontSize: 30, color: Colors.purple),
'text 3 '),
],
),
const SizedBox(height: 20),
Text(txt1),
const Text('Column Text 2'),
ElevatedButton(
onPressed: () {
print('text');
},
child: const Text('Change Text'),
),
],
)),
);
}
}
1.5 결론
이번에는 Flutter의 기본 위젯 Text, Button, Row, Column을 알아 보았습니다. 이를 조합하면 간단한 레이아웃을 쉽게 구성할 수 있습니다. 다음 단계에서는 Flutter의 상태 관리를 알아보며 동적 UI를 구현해 보겠습니다.
1.6 Q&A
Q:Row와 Column에 위젯을 어떻게 배치하나요?
A: children 속성세 추가할 위젯들을 리스트 형식으로 전달하면 됩니다.
Q: 버튼 클릭시 상태를 업데이트할 수 있나요?
A: StatefulWidget을 사용하면 버튼 클릭 이벤트를 통해 상태를 업대이트할 수 있습니다. 다음 강좌에서 다룹니다.
다음 단계에서는 *Flutter의 상태 관리(StatelessWidget & StatefulWidget)*에 대해 알아 보겠습니다.
감사합니다.
댓글 남기기