Flutter로 더 깊이 들어가기: 첫 앱에서 한 단계 더!

2025. 1. 2. 10:45같이 공부합시다 - Flutter/Flutter 기본기

728x90
반응형

 
안녕하세요! 스테디빌더입니다.😁
지난번에는 Flutter를 설치하고 첫 앱을 만들어봤습니다.
 
2024.12.31 - [같이 공부합시다 - Flutter/Flutter 기본기] - Flutter 입문: 비개발자가 첫 앱을 만드는 방법

Flutter 입문: 비개발자가 첫 앱을 만드는 방법

오래 전에 만들어 둔 글인데 이제야 올리네요. 기초부터 차근차근 함께 해 봅시다! 😁😁😁목차1. Flutter가 뭐지?2. 설치부터 시작!3. 첫 앱 만들어보기4. Flutter 앱 구조 이해하기5. Flutter 배우면서

steadybuilder.tistory.com

 
Flutter는 생각보다 직관적이고 재미있다는 걸 느꼈어요.
 
이번에는 조금 더 나아가서 Flutter의 위젯
앱을 구성하는 기본 요소들을 살펴보려고 해요.
 
저도 이 과정을 처음 경험하며 정리한 내용이라,
같이 배우는 기분으로 봐주시면 좋겠어요.
 




 


목차

  1. Flutter 위젯: 앱의 기본 단위
  2. StatelessWidget과 StatefulWidget 차이
  3. Flutter로 간단한 버튼 추가하기
  4. Flutter에서 상태(state) 관리란?
  5. 다음 단계: 상태를 활용한 더 재미있는 앱 만들기

 

1. Flutter 위젯: 앱의 기본 단위

 
Flutter에서 가장 중요한 개념은 위젯(widget)입니다.
모든 Flutter 앱은 위젯들로 구성됩니다.
위젯은 화면에 보여지는 요소(버튼, 텍스트 등)일 수도 있고,
보이지 않지만 레이아웃을 정리하는 역할(컬럼, 행 등)을 할 수도 있어요.

 

주요 위젯 종류

  1. Text: 텍스트를 화면에 표시합니다.
  2. Button: 버튼을 생성합니다.
  3. Row, Column: 가로 또는 세로로 정렬된 레이아웃을 만듭니다.
  4. Container: 박스를 만들고, 색상, 크기 등을 설정합니다.

 
 


 

 

2. StatelessWidget과 StatefulWidget 차이

 
Flutter에서 위젯은 두 가지로 나뉩니다.

  1. StatelessWidget
    • 상태가 없는 위젯입니다.
    • 예: 단순한 텍스트나 아이콘.
  2. 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를 배우고 있는 분들과 경험을 공유하며 성장하고 싶어요.
궁금한 점이나 의견이 있으면 댓글로 남겨주세요!
 
 
 

728x90
반응형