[flutter] 플러터 Radio와 마이페이지 기능의 연동

14 Dec 2023

flutter

플러터 앱을 개발하다보면 Radio 버튼과 마이페이지 기능을 통합하여 사용해야 하는 경우가 있습니다. 이번 블로그에서는 플러터에서 Radio와 마이페이지 기능을 어떻게 연동하고 사용할 수 있는지 알아보겠습니다.

1. Radio 버튼 생성하기

Radio 버튼을 생성하려면 Radio 위젯과 RadioListTile 위젯을 사용합니다. 예를 들어, 성별을 선택하는 Radio 버튼을 만들기 위해서는 다음과 같이 코드를 작성할 수 있습니다.

int _genderValue = 0; // 0: 여성, 1: 남성

RadioListTile(
  title: Text('여성'),
  value: 0,
  groupValue: _genderValue,
  onChanged: (value) {
    setState(() {
      _genderValue = value;
    });
  },
),
RadioListTile(
  title: Text('남성'),
  value: 1,
  groupValue: _genderValue,
  onChanged: (value) {
    setState(() {
      _genderValue = value;
    });
  },
),

위 코드에서 _genderValue는 선택된 Radio 버튼의 값이 저장됩니다.

2. 마이페이지 기능과 연동하기

만약 Radio 버튼을 마이페이지 기능에서 사용하고 싶다면, 마이페이지 화면에서도 같은 _genderValue를 사용하여 선택된 값을 보여줄 수 있습니다.

class MyPage extends StatelessWidget {
  final int genderValue;

  MyPage({required this.genderValue});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(genderValue == 0 ? '여성' : '남성'),
    );
  }
}

MyPage 위젯은 genderValue를 매개변수로 받아 해당하는 성별을 출력합니다.

3. Radio와 마이페이지 기능 연결하기

마지막으로, Radio 버튼과 마이페이지 기능을 연결해보겠습니다.

class RadioAndMyPage extends StatefulWidget {
  @override
  _RadioAndMyPageState createState() => _RadioAndMyPageState();
}

class _RadioAndMyPageState extends State<RadioAndMyPage> {
  int _genderValue = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RadioListTile(
          title: Text('여성'),
          value: 0,
          groupValue: _genderValue,
          onChanged: (value) {
            setState(() {
              _genderValue = value;
            });
          },
        ),
        RadioListTile(
          title: Text('남성'),
          value: 1,
          groupValue: _genderValue,
          onChanged: (value) {
            setState(() {
              _genderValue = value;
            });
          },
        ),
        MyPage(genderValue: _genderValue),
      ],
    );
  }
}

위 코드처럼 RadioAndMyPage 위젯에서는 Radio 버튼을 만들고 선택된 값과 함께 MyPage 위젯을 표시합니다.

이제 플러터에서 Radio와 마이페이지 기능을 함께 사용하는 방법에 대해 알아보았습니다. 위 예제를 참고하여 원하는 기능을 구현해 보세요!