[flutter] RaisedButton을 사용해 체크 박스 동작

07 Dec 2023

flutter

이번 포스트에서는 Flutter의 RaisedButton 위젯을 사용하여 체크 박스 동작을 구현하는 방법에 대해 알아보겠습니다.

1. RaisedButton 위젯 이해하기

RaisedButton은 Material Design 스타일의 머터리얼 버튼을 제공하는 위젯입니다. onPressed 콜백을 통해 버튼이 클릭될 때 어떤 동작을 수행할지 정의할 수 있습니다.

2. 체크 박스 동작 구현하기

아래는 RaisedButton과 체크 박스를 함께 사용해 동작을 구현하는 예시 코드입니다.

import 'package:flutter/material.dart';

class CheckBoxExample extends StatefulWidget {
  @override
  _CheckBoxExampleState createState() => _CheckBoxExampleState();
}

class _CheckBoxExampleState extends State<CheckBoxExample> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('체크 박스 동작 예시'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0),
        child: Column(
          children: [
            RaisedButton(
              child: Text('버튼'),
              onPressed: () {
                // 버튼이 클릭될 때 동작할 코드 작성
                setState(() {
                  isChecked = !isChecked;
                });
              },
            ),
            Checkbox(
              value: isChecked,
              onChanged: (bool value) {
                setState(() {
                  isChecked = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

위 코드는 RaisedButton과 Checkbox 위젯을 함께 사용해 체크 박스를 클릭할 때마다 상태를 업데이트하고, RaisedButton을 클릭할 때마다 체크 박스의 상태를 변경합니다. Checkbox의 값인 isChecked 변수는 체크 박스의 체크 여부를 표시하며, RaisedButton의 onPressed 콜백에서 isChecked 변수를 변경하여 체크 박스의 상태를 업데이트합니다.

3. 결론

Flutter에서 RaisedButton과 Checkbox를 결합하여 체크 박스 동작을 구현하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 동작을 구현할 수 있으며, 사용자가 버튼을 클릭하거나 체크 박스를 선택할 때마다 실시간으로 상태를 업데이트할 수 있습니다.

자세한 내용은 Flutter 공식 문서를 참조하시기 바랍니다.