ClipPath로 Custom Container 만들기

이번에 말풍선 모양의 Container를 사용해야 하는 일이 생겨서 라이브러리를 찾아봤는데 살짝 아쉬운 부분이 있어서 직접 만들어 보기로했습니다.

먼저 코드를 먼저 보여드리면

import 'package:flutter/material.dart';

Widget bubbleWidget({
  required String comment,
  Color color = Colors.grey,
}) =>
    ClipPath(
      child: Container(
        padding: EdgeInsets.only(
          top: 25,
          left: 10,
          right: 10,
          bottom: 10,
        ),
        color: color,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              comment,
              style: TextStyle(
                color: Colors.white,
                fontSize: 13,
              ),
            ),
          ],
        ),
      ),
      clipper: MyClipper(),
    );

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(15, 15);
    path.lineTo(30, 15);
    path.lineTo(30, 5);
    path.quadraticBezierTo(30, 2, 32, 2);
    path.lineTo(48, 15);
    path.lineTo(size.width - 15, 15);
    path.quadraticBezierTo(size.width, 15, size.width, 30);
    path.lineTo(size.width, size.height - 15);
    path.quadraticBezierTo(size.width, size.height, size.width - 15, size.height);
    path.lineTo(15, size.height);
    path.quadraticBezierTo(0, size.height, 0, size.height - 15);
    path.lineTo(0, 30);
    path.quadraticBezierTo(0, 15, 15, 15);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => true;
}

}

Path라는 인스턴트를 생성해서 moveTo, lineTo, quadraticBezierTo를 사용하여 path를 변형하고 그 path를 리턴하는 방식입니다. 이렇게 해서 결과물은

만약 만들기가 좀 귀찮거나 번거로우면 그나마 봤던 라이브러리중에는
https://pub.dev/packages/speech_balloon 이 라이브러리가 가장 괜찮아보였습니다.