[flutter] superellipse 모양을 활용한 플러터 앱의 체크 박스 디자인하기

15 Dec 2023

flutter

이번에는 Flutter 앱에서 일반적인 사각형이 아닌 superellipse(슈퍼 타원) 모양을 사용하여 체크 박스를 디자인하는 방법에 대해 알아보겠습니다. superellipse는 일반적인 원이나 사각형보다 조금 더 부드럽고 모던한 디자인을 제공하기 때문에 앱의 UI/UX를 개선하는 데 유용합니다.

1. superellipse 패키지 설치하기

먼저, Flutter 앱에 superellipse 모양을 사용하기 위해 superellipse 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해 주세요.

dependencies:
  superellipse: ^1.0.0

그리고 이후에 패키지를 설치하기 위해 터미널에서 flutter pub get 명령어를 실행해 주세요.

2. SuperellipseShape 클래스 활용하기

이제, 설치한 superellipse 패키지를 사용하여 체크 박스 디자인을 구현해보겠습니다. 우선 SuperellipseShape 클래스를 이용하여 슈퍼 타원 모양을 만들고 이를 스택 위젯과 함께 사용하여 체크 박스를 디자인할 수 있습니다.

아래는 예시 코드입니다.

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

class SuperellipseCheckbox extends StatelessWidget {
  final bool isChecked;
  final void Function(bool?) onChanged;

  const SuperellipseCheckbox({
    required this.isChecked,
    this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (onChanged != null) {
          onChanged!(!isChecked);
        }
      },
      child: Stack(
        children: [
          Superellipse(
            child: Container(
              width: 24,
              height: 24,
              decoration: BoxDecoration(
                color: isChecked ? Colors.green : Colors.grey,
              ),
            ),
          ),
          if (isChecked)
            Center(
              child: Icon(
                Icons.check,
                color: Colors.white,
              ),
            ),
        ],
      ),
    );
  }
}

위의 코드에서 SuperellipseCheckbox 위젯은 Superellipse 클래스를 사용하여 타원 모양의 체크 박스를 만들고, Stack 위젯을 이용하여 체크 마크를 적용하고 있습니다.

3. 사용 방법

SuperellipseCheckbox 위젯은 다음과 같이 사용할 수 있습니다.

SuperellipseCheckbox(
  isChecked: true,
  onChanged: (value) {
    // 체크 박스 상태 변경 코드
  },
)

이제 superellipse 패키지를 활용하여 Flutter 앱에서 슈퍼 타원 모양을 활용한 체크 박스를 디자인하는 방법에 대해 알아보았습니다.

더 많은 정보를 원하시거나 문제가 발생했을 경우 superellipse 패키지 문서를 참고하시기 바랍니다.