[flutter] superellipse 모양을 이용한 플러터 앱의 라디오 버튼 디자인 방법

15 Dec 2023

flutter

플러터(Flutter)로 앱을 개발할 때 라디오 버튼을 일반적인 동그란 형태가 아닌 Superellipse 모양으로 디자인하고 싶다면, 다음의 방법을 사용할 수 있습니다.

Superellipse 모양 라디오 버튼 디자인 방법

Superellipse 모양의 라디오 버튼을 디자인하기 위해 다음 단계를 따릅니다.

1. 커스텀 라디오 버튼 위젯 생성

먼저, Superellipse 모양의 라디오 버튼을 만들기 위해 커스텀 라디오 버튼 위젯을 생성합니다. 이 위젯은 Container 위젯을 사용하여 Superellipse 모양을 갖도록 모양을 변경합니다.

import 'package:flutter/material.dart';

class CustomRadio extends StatelessWidget {
  final bool selected;

  CustomRadio(this.selected);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 24.0,
      height: 24.0,
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(10), // Adjust the radius for the superellipse shape
        border: Border.all(
          width: 2.0,
          color: selected ? Colors.blue : Colors.grey,
        ),
      ),
      // Add the inner circle to indicate selection
      child: selected
          ? Container(
              width: 16.0,
              height: 16.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue,
              ),
            )
          : Container(),
    );
  }
}

2. 커스텀 라디오 버튼 위젯 사용

생성한 커스텀 라디오 버튼 위젯을 실제 라디오 버튼과 함께 사용합니다.

class MyRadioWidget extends StatefulWidget {
  @override
  _MyRadioWidgetState createState() => _MyRadioWidgetState();
}

class _MyRadioWidgetState extends State<MyRadioWidget> {
  String selectedValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioListTile<String>(
          title: Text('Option 1'),
          value: 'option1',
          groupValue: selectedValue,
          onChanged: (value) {
            setState(() {
              selectedValue = value;
            });
          },
          activeColor: Colors.transparent,
          controlAffinity: ListTileControlAffinity.trailing,
          secondary: CustomRadio(selectedValue == 'option1'),
        ),
        RadioListTile<String>(
          title: Text('Option 2'),
          value: 'option2',
          groupValue: selectedValue,
          onChanged: (value) {
            setState(() {
              selectedValue = value;
            });
          },
          activeColor: Colors.transparent,
          controlAffinity: ListTileControlAffinity.trailing,
          secondary: CustomRadio(selectedValue == 'option2'),
        ),
      ],
    );
  }
}

이제, Superellipse 모양의 라디오 버튼이 포함된 위젯을 사용하여 앱의 UI를 디자인할 수 있습니다.

마치며

위 방법을 통해 Superellipse(슈퍼엘립스) 모양의 라디오 버튼을 플러터 앱에 쉽게 구현할 수 있습니다. 원하는 형태의 UI를 만들고 싶을 때는 커스텀 위젯을 만들어서 활용하는 것이 좋습니다.