위젯 기초: Flutter의 위젯 시스템 이해하기
Flutter에서 위젯은 애플리케이션의 모든 것을 구성하는 기본 단위입니다. 화면에 표시되는 모든 요소는 위젯으로 구성되며, 이러한 위젯을 조합하여 복잡한 UI를 만들 수 있습니다. 이 강의에서는 Flutter의 위젯 시스템에 대해 이해하고, 기본 위젯들을 사용하여 간단한 UI를 구성하는 방법을 학습합니다.
위젯의 종류
Flutter 위젯은 크게 두 가지로 나눌 수 있습니다:
- StatelessWidget: 상태가 없는 위젯으로, 생성 후 변경되지 않습니다.
- StatefulWidget: 상태를 가질 수 있는 위젯으로, 상태가 변경될 때마다 다시 그려집니다.
StatelessWidget
StatelessWidget은 변하지 않는 UI 요소를 정의할 때 사용합니다. 다음은 간단한 StatelessWidget의 예입니다:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('StatelessWidget 예제'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
),
);
}
}StatefulWidget
StatefulWidget은 변할 수 있는 상태를 가지며, 상태가 변경될 때마다 UI를 다시 렌더링합니다. 다음은 StatefulWidget의 예입니다:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('StatefulWidget 예제'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Button pressed this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
);
}
}주요 위젯 소개
Text
Text 위젯은 화면에 텍스트를 표시할 때 사용합니다. 다양한 스타일을 적용할 수 있습니다.
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)Container
Container 위젯은 레이아웃을 구성하는 데 사용되며, 패딩, 마진, 배경색 등을 설정할 수 있습니다.
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(8.0),
color: Colors.blue,
child: Text('Container 위젯'),
)Row와 Column
Row와 Column 위젯은 수평 및 수직 방향으로 위젯을 배열할 때 사용합니다.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('First item'),
Text('Second item'),
Text('Third item'),
],
)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('First item'),
Text('Second item'),
Text('Third item'),
],
)ListView
ListView 위젯은 스크롤 가능한 리스트를 만들 때 사용합니다.
ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
)실습: 간단한 프로필 카드 만들기
이제 배운 위젯들을 사용하여 간단한 프로필 카드를 만들어보겠습니다.
import 'package:flutter/material.dart';
void main() {
runApp(ProfileApp());
}
class ProfileApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('프로필 카드'),
),
body: Center(
child: ProfileCard(),
),
),
);
}
}
class ProfileCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Card(
margin: EdgeInsets.all(16.0),
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CircleAvatar(
radius: 50,
backgroundImage: NetworkImage('https://via.placeholder.com/150'),
),
SizedBox(height: 16.0),
Text(
'John Doe',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
Text(
'Software Developer',
style: TextStyle(color: Colors.grey[700]),
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.phone, color: Colors.blue),
Icon(Icons.email, color: Colors.blue),
Icon(Icons.location_on, color: Colors.blue),
],
)
],
),
),
);
}
}결론
이 강의를 통해 Flutter의 위젯 시스템과 주요 위젯들에 대해 학습했습니다. 위젯을 활용하여 간단한 UI를 구성하는 방법을 배웠으며, 실제로 프로필 카드를 만들어 보았습니다. 다음 강의에서는 Flutter의 레이아웃 시스템과 더 복잡한 UI를 구성하는 방법에 대해 알아보겠습니다. Flutter를 사용하여 멋진 UI를 만들어 보세요!
댓글