[flutter] RaisedButton을 이용한 토글 및 스위치 버튼 구현

07 Dec 2023

flutter

평소에 Flutter를 사용하여 앱을 개발하시는 분들은 RaisedButto를 자주 사용하실 것입니다. RaisedButto는 간단한 버튼을 만들기에 적합한 위젯이지만, 토글 버튼이나 스위치 버튼과 같은 상태 변경이 필요한 경우에는 어떻게 구현해야 할까요? 이번 글에서는 RaisedButto을 이용하여 토글 및 스위치 버튼을 구현하는 방법을 알아보겠습니다.

토글 버튼 구현하기

RaisedButton을 토글 형식으로 구현하기 위해서는 상태 변화를 감지하는 변수가 필요합니다. 따라서 StatefulWidget을 사용하여 State를 관리할 수 있는 컴포넌트를 만들어야 합니다.

import 'package:flutter/material.dart';

class ToggleButton extends StatefulWidget {
  @override
  _ToggleButtonState createState() => _ToggleButtonState();
}

class _ToggleButtonState extends State<ToggleButton> {
  bool _isToggled = false;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        setState(() {
          _isToggled = !_isToggled;
        });
      },
      child: Text(_isToggled ? 'ON' : 'OFF'),
    );
  }
}

위의 코드에서는 _isToggled라는 변수를 사용하여 토글 상태를 저장하고, onPressed 함수를 사용하여 상태를 변환시킵니다. 버튼의 텍스트는 _isToggled 변수의 값에 따라 ‘ON’ 또는 ‘OFF’로 변경됩니다.

스위치 버튼 구현하기

RaisedButton을 스위치 형식으로 구현하기 위해서는 RaisedButto와 비슷한 모양을 사용하되, 스위치 상태에 따라 텍스트와 색상이 변하도록 구현해야 합니다.

import 'package:flutter/material.dart';

class SwitchButton extends StatefulWidget {
  @override
  _SwitchButtonState createState() => _SwitchButtonState();
}

class _SwitchButtonState extends State<SwitchButton> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        setState(() {
          _isSwitched = !_isSwitched;
        });
      },
      color: _isSwitched ? Colors.green : Colors.red,
      child: Text(
        _isSwitched ? 'ON' : 'OFF',
        style: TextStyle(
          color: _isSwitched ? Colors.white : Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

위의 코드에서는 _isSwitched라는 변수를 사용하여 스위치 상태를 저장하고, onPressed 함수를 사용하여 상태를 변환시킵니다. 버튼의 배경색과 텍스트 스타일은 _isSwitched 변수의 값에 따라 변경됩니다.

사용 예시

위에서 정의한 ToggleButton과 SwitchButton을 사용하기 위해서는 해당 위젯을 호출하는 방법을 알아야 합니다. 예를 들어, 아래와 같이 메인 화면에서 버튼을 추가할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Toggle & Switch Button'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Toggle Button'),
              ToggleButton(),
              SizedBox(height: 20),
              Text('Switch Button'),
              SwitchButton(),
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 Column을 사용하여 버튼 위젯을 세로로 배치하고, 각각의 버튼은 ToggleButton과 SwitchButton을 통해 생성됩니다.

이제 앱을 실행하면 토글 버튼과 스위치 버튼이 나타나고, 버튼을 클릭하여 상태를 변경할 수 있습니다.

마무리

RaisedButton을 토글 형식이나 스위치 형식으로 사용하는 방법에 대해 알아보았습니다. 이를 활용하여 앱에서 필요한 토글 버튼 또는 스위치 버튼을 구현할 수 있습니다. Flutter에서는 위젯의 상태 변화를 관리하는 StatefulWidget와 setState 함수를 사용하여 상태 변화를 감지하고 UI를 갱신할 수 있습니다. 위에서 소개한 코드를 참고하여 자신만의 토글 버튼 혹은 스위치 버튼을 만들어보세요!