[flutter] RaisedButton을 동적으로 생성하고 제거하는 방법

07 Dec 2023

flutter

Flutter 앱에서 RaisedButoon을 동적으로 생성하고 제거하는 방법에 대해 알아보겠습니다.

RaisedButton은 버튼을 생성하고 사용자의 터치 이벤트를 처리하는데 사용되는 Material Design 스타일의 위젯입니다.

버튼 동적 생성하기

버튼을 동적으로 생성하려면 StatefulWidget을 사용해야 합니다. StatefulWidget은 상태가 변경될 수 있는 위젯입니다.

import 'package:flutter/material.dart';

class DynamicButton extends StatefulWidget {
  @override
  _DynamicButtonState createState() => _DynamicButtonState();
}

class _DynamicButtonState extends State<DynamicButton> {
  bool _buttonVisible = false;

  void _showButton() {
    setState(() {
      _buttonVisible = true;
    });
  }

  void _hideButton() {
    setState(() {
      _buttonVisible = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RaisedButton(
          child: Text('동적 버튼'),
          onPressed: () {},
        ),
        SizedBox(height: 16),
        Visibility(
          visible: _buttonVisible,
          child: RaisedButton(
            child: Text('숨김 버튼'),
            onPressed: () {},
          ),
        ),
        SizedBox(height: 16),
        RaisedButton(
          child: Text(_buttonVisible ? '버튼 숨기기' : '버튼 보이기'),
          onPressed: () {
            _buttonVisible ? _hideButton() : _showButton();
          },
        ),
      ],
    );
  }
}

위 코드는 DynamicButton이라는 StatefulWidget을 만들어 버튼을 동적으로 생성하도록 합니다.

_buttonVisible 변수는 버튼의 가시성을 제어하기 위해 사용됩니다. 초기 상태에서는 false로 설정되어 버튼이 보이지 않습니다.

_showButton 함수는 버튼을 표시하는데 사용되고, _hideButton 함수는 버튼을 숨기는데 사용됩니다. 이 두 함수는 상태가 변경될 때마다 setState를 호출하여 UI를 업데이트합니다.

build 메소드에서는 Column 위젯을 사용하여 버튼 위젯을 세로로 배치합니다. 버튼 아래에는 _buttonVisible 상태에 따라 보이도록 조건부로 RaisedButton을 생성합니다. 또한, 버튼 아래에는 버튼 숨기기 또는 버튼 보이기 텍스트를 가진 RaisedButton을 생성합니다. 이 버튼을 누르면 _hideButton 또는 _showButton 함수가 호출됩니다.

버튼 동적 제거하기

버튼을 동적으로 제거하려면 setState 메서드를 사용하여 상태를 변경해야 합니다.

class _DynamicButtonState extends State<DynamicButton> {
  bool _buttonVisible = true;

  void _removeButton() {
    setState(() {
      _buttonVisible = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RaisedButton(
          child: Text('동적 버튼'),
          onPressed: () {},
        ),
        SizedBox(height: 16),
        Visibility(
          visible: _buttonVisible,
          child: RaisedButton(
            child: Text('숨김 버튼 제거'),
            onPressed: () {
              _removeButton();
            },
          ),
        ),
      ],
    );
  }
}

위 코드에서는 _removeButton 함수를 통해 생성된 버튼을 동적으로 제거할 수 있습니다. 버튼이 제거되면 _buttonVisible 상태가 false로 변경되고, UI가 다시 그려지면서 버튼이 사라집니다.

결론

Flutter에서 RaisedButoon을 동적으로 생성하고 제거하는 방법에 대해 알아보았습니다. StatefulWidget을 이용하여 상태를 변경하고, setState를 통해 UI를 업데이트하는 방식을 사용하였습니다. 적절한 상태 관리와 조건부 렌더링으로 버튼을 동적으로 제어할 수 있습니다.

참고: Flutter RaisedButton documentation