[flutter] 플러터 앱의 라인 디자인을 위한 클리퍼 사용 예제

05 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 다양한 디자인 요소를 구현하는데 매우 편리합니다. 이 중에서도 라인 디자인은 많은 앱에서 자주 사용되는데요. 이번에는 플러터 앱에서 라인 디자인을 구현하기 위해 클리퍼(clipper)를 사용하는 예제를 소개하겠습니다.

클리퍼란?

클리퍼는 플러터에서 공개되어 있는 기능으로, 원하는 모양으로 위젯의 작업 영역을 자를 수 있습니다. 이를 통해 다양한 모양의 UI를 구현할 수 있습니다.

예제 코드

아래는 플러터를 사용하여 라인 디자인을 구현하는 예제 코드입니다.

import 'package:flutter/material.dart';

class LineClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, size.height / 2);
    path.lineTo(size.width, size.height / 2);
    return path;
  }

  @override
  bool shouldReclip(LineClipper oldClipper) => false;
}

class LineDesignApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('라인 디자인 예제'),
      ),
      body: Center(
        child: ClipPath(
          clipper: LineClipper(),
          child: Container(
            width: 200,
            height: 4,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(LineDesignApp());
}

위 코드는 LineClipper 라는 클래스를 정의하여 CustomClipper 클래스를 상속받아 getClip 메소드를 재정의합니다. 이 메소드에서는 원하는 모양의 Path를 만들어 반환합니다. 위 예제에서는 수평으로 가는 라인을 나타내기 위해 시작점과 끝점을 이어주는 Path를 생성한 후 반환합니다.

LineDesignApp 클래스는 StatelessWidget을 상속받아 화면을 구성하는 역할을 합니다. ClipPath 위젯을 사용하여 자르고자 하는 영역에 클리퍼를 설정하고, 그 아래에 있는 Container 위젯을 통해 실제로 라인을 그립니다.

마지막으로 main 함수에서는 LineDesignApp을 실행하는 앱을 실행합니다.

실행 결과

위 예제 코드를 실행하면 아래와 같이 수평으로 가는 라인이 생성됩니다.

Line Design Example

참고 자료

Flutter 공식 문서 - CustomClipper 클래스