[flutter] 클리퍼를 이용한 플러터 앱 카드 디자인 예제

05 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 모바일 애플리케이션 개발 프레임워크로, 아름다운 사용자 인터페이스(UI)를 빠르고 간편하게 빌드할 수 있습니다. 이번 예제에서는 클리퍼(Clipper)를 사용하여 플러터 앱의 카드 디자인을 만들어보겠습니다.

카드 디자인 구현

먼저, 필요한 패키지를 import합니다.

import 'package:flutter/material.dart';

다음으로, Clipper 클래스를 상속받는 CardClipper 클래스를 정의합니다. 이 클래스는 원하는 모양으로 카드를 잘라내는 역할을 합니다. 예제에서는 간단하게 원형으로 카드를 자르도록 만들어보겠습니다.

class CardClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();
    path.addOval(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 50.0));
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

이제, CardClipper를 사용하여 카드를 만들어보겠습니다. ClipPath 위젯을 사용하여 원하는 모양대로 카드를 잘라내고, Card 위젯으로 감싸서 그림자 효과를 줄 수 있습니다.

ClipPath(
  clipper: CardClipper(),
  child: Card(
    elevation: 5.0,
    margin: EdgeInsets.all(10.0),
    child: Container(
      width: 200.0,
      height: 200.0,
      child: Center(
        child: Text(
          "플러터 카드 예제",
          style: TextStyle(fontSize: 20.0),
        ),
      ),
    ),
  ),
)

전체 코드

import 'package:flutter/material.dart';

class CardClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = new Path();
    path.addOval(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 50.0));
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

class MyCardApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("플러터 카드 예제"),
        ),
        body: Center(
          child: ClipPath(
            clipper: CardClipper(),
            child: Card(
              elevation: 5.0,
              margin: EdgeInsets.all(10.0),
              child: Container(
                width: 200.0,
                height: 200.0,
                child: Center(
                  child: Text(
                    "플러터 카드 예제",
                    style: TextStyle(fontSize: 20.0),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyCardApp());

결과 확인

위의 코드를 실행하면 다음과 같은 원형으로 잘라진 카드가 화면에 나타납니다.

flutter_card_design_example

이제 여러분은 클리퍼를 이용하여 원하는 모양의 플러터 앱 카드 디자인을 만들 수 있습니다. 색상, 크기, 그림자 등의 속성을 알맞게 조절하여 독특하고 세련된 디자인을 만들어보세요.

참고 문서: