Flutter StatefulWidget 사용하기

안녕하세요.

이번 포스팅에서는 Flutter의 StatefulWidget에 대해 간략하게 알아보겠습니다.

 

언어: dart

IDE: Android Studio

Framework: Flutter

Test device: Android

---

StatefulWidget이란?

Flutter에서 StatefulWidget은 상태(state)를 가질 수 있는 위젯입니다. 상태는 위젯이 동적으로 변경될 수 있는 데이터를 말하며, 사용자의 동작이나 외부 요인에 의해 변경될 수 있습니다. 예를 들어, 버튼 클릭, API 호출 결과, 사용자 입력 등으로 인해 위젯의 상태가 바뀌면 화면이 다시 그려질 수 있습니다.

*Kotlin(Jetpack Compos)에서는 MutableState, SwiftUI에서는 @State와 같은 역할을 한다 볼 수 있습니다.

StatefulWidget 구조

StatefulWidget은 두 가지 주요 클래스로 나뉩니다.

    1. StatefulWidget 클래스

    2. State 클래스

 

StatefulWidget을 사용한다면, 고정된 UI에서 벗어나 사용자의 상호작용에 따라 데이터와 화면이 업데이트됩니다.

또한, 위젯 트리가 다시 빌드되더라도 State 객체는 유지됩니다.

 

이를 활용해 간단한 예시를 구현해 보겠습니다.

 

우선 아래와 같이 버튼과 텍스트를 구현합니다.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: StateExample(),
  ));
}

class StateExample extends StatefulWidget {
  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Delay Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: (){},
              child: Text('Show message'),
            ),
            SizedBox(height: 20),
              Text(
                'Hello World',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
          ],
        ),
      ),
    );
  }
}

 

StatefulWidget과 State 클래스를 extends 해주었습니다. 하지만 현재는 아무 기능도 하지 않는 버튼과 간단한 텍스트만 그려주고 있습니다.

 

여기에 state 역할을 할 변수를 추가해 줍니다.

main.dart/_StateExampleState

bool _showMessage = false;

 

다음으로, 해당 state를 변경해 주는 코드를 추가합니다.

main.dart/_StateExampleState

void _setMessageVisibility() async {
  setState(() {
    _showMessage = !_showMessage;
  });
}

 

_setMessageVisibility가 호출될 때마다 기존 _showMessage 값과 상반되는 값을 set 해줍니다.

 

이제 버튼 내의 onPressed의 동작을 아래와 같이 수정해 줍니다.

ElevatedButton(
  onPressed: _setMessageVisibility,
  child: Text('Show message'),
),

버튼 클릭 시 _setMessageVisibility를 호출하게 됩니다.

 

마지막으로, Text의 visibility 조건을 추가해 줍니다.

if (_showMessage)
  Text(
    'Hello World',
    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  ),

_showMessage 값이 true일 경우에만 해당 Text Wiget이 그려지도록 수정해 주었습니다.

 

다음은 전체 코드입니다.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: StateExample(),
  ));
}

class StateExample extends StatefulWidget {
  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample> {
  bool _showMessage = false;

  void _setMessageVisibility() async {
    setState(() {
      _showMessage = !_showMessage;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Delay Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _setMessageVisibility,
              child: Text('Show message'),
            ),
            SizedBox(height: 20),
            if (_showMessage)
              Text(
                'Hello World',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
          ],
        ),
      ),
    );
  }
}

 

 

이제 버튼을 클릭할 때마다 메시지가 점멸하는 동작을 기대할 수 있습니다.

 

result

 

정상적으로 동작하는 것이 확인됩니다.

 

이상 포스팅을 마치겠습니다.

 

감사합니다.