[flutter] superellipse 모양을 이용한 플러터 앱의 지도 디자인 방법

15 Dec 2023

flutter

플러터 앱에서 지도 디자인을 개선하고자 할 때 superellipse 모양을 활용할 수 있습니다. superellipse는 둥근 사각형 형태를 기반으로 하는데, 이를 이용하여 지도의 모서리를 더 부드럽게 만들 수 있습니다. 이 글에서는 superellipse를 사용하여 플러터 앱의 지도 디자인을 개선하는 방법을 알아보겠습니다.

superellipse란 무엇인가요?

superellipse는 두 개 이상의 매개변수로 정의되는 수학적 함수로, 둥근 직사각형의 형태를 따르는 곡선을 만들어냅니다. 이를 이용하면 지도의 모서리를 더 부드럽게 만들 수 있어 보다 현대적이고 세련된 디자인을 구현할 수 있습니다.

플러터 앱에 superellipse 모양을 적용하는 방법

플러터에서 superellipse 모양을 적용하려면 CustomPaint 위젯과 Path 클래스를 사용하여 새로운 지도 디자인을 구현할 수 있습니다. 아래는 superellipse를 그리는 예시 코드입니다.

import 'package:flutter/material.dart';

class SuperellipseMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      child: CustomPaint(
        painter: SuperellipsePainter(),
      ),
    );
  }
}

class SuperellipsePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    var path = Path();
    path.moveTo(0, size.height * 0.2);
    path.lineTo(0, size.height * 0.8);
    path.quadraticBezierTo(0, size.height, size.width * 0.3, size.height);
    path.quadraticBezierTo(size.width, size.height, size.width, size.height * 0.8);
    path.lineTo(size.width, size.height * 0.2);
    path.quadraticBezierTo(size.width, 0, size.width * 0.7, 0);
    path.quadraticBezierTo(0, 0, 0, size.height * 0.2);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

위 코드는 CustomPainter를 이용하여 superellipse 모양의 지도를 그리는 방법을 보여줍니다.

결론

superellipse를 이용하여 플러터 앱의 지도 디자인을 새롭게 꾸밀 수 있습니다. 이러한 디자인 요소를 적용하면 사용자들이 더욱 매력적으로 느낄 것이며, 앱의 사용성과 시각적 품질을 향상시킬 수 있습니다.