[Flutter] "Stateful 위젯 데모" 앱을 만들며 버튼을 누를 때마다 버튼 상태를 토글하는 간단한 예제

수정된 코드는 이전 코드와 동일하며, 이제 정상적으로 작동해야 합니다. 이 코드는 "Stateful 위젯 데모" 앱을 만들며 버튼을 누를 때마다 버튼 상태를 토글하는 간단한 예제입니다.

아래는 앱을 실행하는 방법입니다:

1. 필요한 Flutter 개발 환경을 설치하고, 프로젝트 디렉토리에서 flutter create 명령으로 새 프로젝트를 만듭니다.
2. 위의 코드를 main.dart 파일에 복사하여 붙여넣고 저장합니다.
3. 명령 프롬프트 또는

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  title: 'Stateful 위젯 데모',
  home: Scaffold(
    appBar: AppBar(title: Text('Stateful 위젯 데모')),
    body: _MyStatefulWidget(),
  ),
));

class _MyStatefulWidget extends StatefulWidget {
  @override
  State createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<_MyStatefulWidget> {
  late String _buttonState;

  @override
  void initState() {
    super.initState();
    print('initState(): 기본값을 설정합니다');
    _buttonState = 'OFF';
  }

  @override
  Widget build(BuildContext context) {
    print('build() 호출됨');
    return Column(
      children: <Widget>[
        TextButton(
          child: Text('버튼을 누르세요'),
          onPressed: _onClick,
        ),
        Row(
          children: <Widget>[
            Text('버튼상태: '),
            Text(_buttonState),
          ],
        )
      ],
    );
  }

  void _onClick() {
    print('_onClick() 호출됨');
    setState(() {
      print('setState() 호출됨');
      if (_buttonState == 'OFF') {
        _buttonState = 'ON';
      } else {
        _buttonState = 'OFF';
      }
    });
  }

  @override
  void dispose() {
    print('dispose()');
    super.dispose();
  }

Flutter 2.12.0 버전부터, null 안전성 (null safety)이 강제되어 필드를 선언할 때 초기값을 주거나 late 키워드를 사용해야 합니다. _buttonState 필드를 late 키워드로 표시하면 이 오류를 해결할 수 있습니다. 필드를 late로 변경하고 필요한 경우 초기화하도록 수정된 코드는 다음과 같습니다:

 

Flutter에서 버튼 위젯을 생성할 때 RaisedButton이 아닌 ElevatedButton을 사용해야 합니다. RaisedButton은 이전 버전의 Flutter에서 사용되었던 것이며, Flutter의 업데이트로 ElevatedButton이 대체되었습니다.

따라서 RaisedButton을 ElevatedButton으로 변경해야 합니다. 수정된 코드는 다음과 같습니다: