[flutter] 플러터 프로바이더를 사용하여 라디오 버튼 만들기

26 Dec 2023

flutter

플러터에서 라디오 버튼을 만들기 위해 프로바이더(Provider)를 사용하는 방법에 대해 알아보겠습니다.

프로바이더(Provider) 패키지 추가

먼저, pubspec.yaml 파일에 provider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

이후 pub get 명령어를 실행하여 패키지를 가져옵니다.

모델 클래스 생성

라디오 버튼에서 선택할 옵션을 나타내는 모델 클래스를 생성합니다.

class RadioButtonModel {
  final String id;
  final String text;

  RadioButtonModel({required this.id, required this.text});
}

프로바이더 클래스 생성

선택된 라디오 버튼 옵션을 관리할 프로바이더 클래스를 생성합니다.

import 'package:flutter/material.dart';

class RadioButtonProvider extends ChangeNotifier {
  RadioButtonModel? _selectedOption;

  set selectedOption(RadioButtonModel? option) {
    _selectedOption = option;
    notifyListeners();
  }

  RadioButtonModel? get selectedOption => _selectedOption;
}

라디오 버튼 위젯 생성

프로바이더를 사용하여 라디오 버튼을 생성합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class RadioButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<RadioButtonProvider>(
      builder: (context, radioButtonProvider, child) => Column(
        children: radioButtonOptions
            .map(
              (option) => RadioListTile(
                title: Text(option.text),
                value: option,
                groupValue: radioButtonProvider.selectedOption,
                onChanged: (selected) {
                  radioButtonProvider.selectedOption = selected as RadioButtonModel?;
                },
              ),
            )
            .toList(),
      ),
    );
  }
}

List<RadioButtonModel> radioButtonOptions = [
  RadioButtonModel(id: '1', text: 'Option 1'),
  RadioButtonModel(id: '2', text: 'Option 2'),
  RadioButtonModel(id: '3', text: 'Option 3'),
];

위와 같이 프로바이더를 사용하여 라디오 버튼을 만들면, 상태 관리가 간편해지고 유연한 애플리케이션을 구축할 수 있습니다.