2025. 1. 2. 10:45ㆍ같이 공부합시다 - Flutter/Flutter 기본기
안녕하세요! 스테디빌더입니다.😁
지난번에는 Flutter를 설치하고 첫 앱을 만들어봤습니다.
2024.12.31 - [같이 공부합시다 - Flutter/Flutter 기본기] - Flutter 입문: 비개발자가 첫 앱을 만드는 방법
Flutter 입문: 비개발자가 첫 앱을 만드는 방법
오래 전에 만들어 둔 글인데 이제야 올리네요. 기초부터 차근차근 함께 해 봅시다! 😁😁😁목차1. Flutter가 뭐지?2. 설치부터 시작!3. 첫 앱 만들어보기4. Flutter 앱 구조 이해하기5. Flutter 배우면서
steadybuilder.tistory.com
Flutter는 생각보다 직관적이고 재미있다는 걸 느꼈어요.
이번에는 조금 더 나아가서 Flutter의 위젯과
앱을 구성하는 기본 요소들을 살펴보려고 해요.
저도 이 과정을 처음 경험하며 정리한 내용이라,
같이 배우는 기분으로 봐주시면 좋겠어요.

목차
- Flutter 위젯: 앱의 기본 단위
- StatelessWidget과 StatefulWidget 차이
- Flutter로 간단한 버튼 추가하기
- Flutter에서 상태(state) 관리란?
- 다음 단계: 상태를 활용한 더 재미있는 앱 만들기
1. Flutter 위젯: 앱의 기본 단위
Flutter에서 가장 중요한 개념은 위젯(widget)입니다.
모든 Flutter 앱은 위젯들로 구성됩니다.
위젯은 화면에 보여지는 요소(버튼, 텍스트 등)일 수도 있고,
보이지 않지만 레이아웃을 정리하는 역할(컬럼, 행 등)을 할 수도 있어요.
주요 위젯 종류
- Text: 텍스트를 화면에 표시합니다.
- Button: 버튼을 생성합니다.
- Row, Column: 가로 또는 세로로 정렬된 레이아웃을 만듭니다.
- Container: 박스를 만들고, 색상, 크기 등을 설정합니다.
2. StatelessWidget과 StatefulWidget 차이
Flutter에서 위젯은 두 가지로 나뉩니다.
- StatelessWidget
- 상태가 없는 위젯입니다.
- 예: 단순한 텍스트나 아이콘.
- StatefulWidget
- 상태를 가질 수 있는 위젯입니다.
- 예: 사용자가 버튼을 누르면 화면이 바뀌는 경우.
실행 가능한 코드 예제: StatelessWidget과 StatefulWidget 비교
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// StatelessWidget 예제
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Flutter 위젯 비교")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("StatelessWidget: 상태 변화 없음"),
SizedBox(height: 20),
MyButton(), // StatefulWidget 예제
],
),
),
),
);
}
}
// StatefulWidget 예제
class MyButton extends StatefulWidget {
@override
_MyButtonState createState() => _MyButtonState();
}
class _MyButtonState extends State<MyButton> {
String _buttonText = "눌러보세요!";
void _updateText() {
setState(() {
_buttonText = "눌렀어요!";
});
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: _updateText,
child: Text(_buttonText),
);
}
}
이 코드를 실행하면 StatelessWidget은 고정된 텍스트를 보여주고,
StatefulWidget은 버튼을 눌렀을 때 텍스트가 바뀝니다.
3. Flutter로 간단한 버튼 추가하기
Flutter에서 버튼을 추가하는 건 정말 간단해요. 아래 코드를 main.dart 파일에 복사해 실행해보세요.
실행 가능한 코드: 버튼 추가하기
import 'package:flutter/material.dart';
void main() => runApp(ButtonApp());
class ButtonApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Flutter 버튼 예제")),
body: Center(
child: ElevatedButton(
onPressed: () {
print("버튼이 눌렸어요!");
},
child: Text("눌러보세요!"),
),
),
),
);
}
}
버튼을 누르면 터미널 (VSCode 이면 DEBUG CONSOLE) 에 "버튼이 눌렸어요!"라는 메시지가 출력됩니다.
4. Flutter에서 상태(state) 관리란?
Flutter의 state(상태)는 앱이 현재 어떤 상태에 있는지를 나타내요.
버튼을 누르거나 데이터를 입력할 때처럼, 앱의 상태가 변할 때 UI도 함께 바뀝니다.
실행 가능한 코드: 상태 관리 예제
import 'package:flutter/material.dart';
void main() => runApp(CounterApp());
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterScreen(),
);
}
}
class CounterScreen extends StatefulWidget {
@override
_CounterScreenState createState() => _CounterScreenState();
}
class _CounterScreenState extends State<CounterScreen> {
int _count = 0;
void _incrementCount() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Flutter 상태 관리")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"버튼을 누른 횟수: $_count",
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCount,
child: Text("눌러보세요!"),
),
],
),
),
);
}
}
버튼을 누를 때마다 숫자가 증가하고, 화면에 즉시 반영됩니다.
5. 다음 단계: 상태를 활용한 더 재미있는 앱 만들기
Flutter에서 상태 관리를 더 활용해 다음과 같은 앱을 만들어볼 수 있어요.
- 버튼을 눌러 배경색을 바꾸는 앱.
- 입력 필드를 추가해 사용자가 텍스트를 입력하면 화면에 출력되도록 만들기.
- 간단한 계산기 앱 만들기.
Flutter는 배우면 배울수록 더 재미있고, 가능성이 무궁무진한 것 같습니다.
이번 예제를 통해 상태 관리와 위젯의 차이가 조금은 이해가 된 것 같네요. 😅
마무리
Flutter 뿐만 아니라 모든 프로그래밍 혹은 코딩을 배우는 과정은
간단한 실습을 해보면서 공부하면 이해가 더 쉬워지는 것 같아요.
이번에는 상태 관리와 버튼, 위젯의 기본 개념을 다뤄봤어요.
다음에는 더 복잡한 UI 구성과 데이터 저장 방법을 다뤄볼 예정입니다.
같이 Flutter를 배우고 있는 분들과 경험을 공유하며 성장하고 싶어요.
궁금한 점이나 의견이 있으면 댓글로 남겨주세요!
'같이 공부합시다 - Flutter > Flutter 기본기' 카테고리의 다른 글
Flutter로 간단한 계산기 앱 만들기: 초보 개발자의 도전 (5) | 2025.01.04 |
---|---|
Flutter로 첫 입력 필드 만들기: 초보 개발자의 도전기 (6) | 2025.01.03 |
Flutter 입문: 비개발자가 첫 앱을 만드는 방법 (11) | 2025.01.01 |
Flutter에서 새로운 프로젝트를 만드는 방법 (1) | 2024.12.13 |
Dart 2.17 이후 생성자를 통한 객체 초기화 변경 내용 (+Quick Fix 사용법) (3) | 2024.11.22 |