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

05 Dec 2023

flutter

안녕하세요! 이번에는 플러터(Flutter) 앱에서 메뉴 디자인을 구현할 때 사용할 수 있는 클리퍼(Clipper)의 사용 예제에 대해 알아보겠습니다.

클리퍼란?

클리퍼는 플러터 앱에서 UI 요소의 모양을 잘라내는 데 사용되는 도구입니다. 흔히 이를 사용하여 사용자 정의된 모양의 메뉴 바 또는 탭 바를 만들 수 있습니다.

클리퍼 사용 예제

아래 예제는 플러터 앱에서 메뉴 디자인에 클리퍼를 사용하는 간단한 예제입니다.

import 'package:flutter/material.dart';

// 커스텀 클리퍼 클래스 정의
class CustomClipperMenu extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    
    // 경로를 사용하여 원하는 모양의 메뉴 아이템을 추가합니다.
    path.lineTo(0, size.height * 0.5);
    path.lineTo(size.width * 0.5, size.height * 0.3);
    path.lineTo(size.width, size.height * 0.5);
    path.lineTo(size.width, 0);
    
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('메뉴 디자인 예제'),
        ),
        body: Center(
          child: ClipPath(
            clipper: CustomClipperMenu(),
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    '메뉴 1',
                    style: TextStyle(fontSize: 24, color: Colors.white),
                  ),
                  Text(
                    '메뉴 2',
                    style: TextStyle(fontSize: 24, color: Colors.white),
                  ),
                  Text(
                    '메뉴 3',
                    style: TextStyle(fontSize: 24, color: Colors.white),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

이 예제에서는 CustomClipperMenu라는 클래스를 정의하여 CustomClipper를 상속받습니다. getClip 메서드를 오버라이드하여 잘라내기(Path) 작업을 수행합니다. 이 때, 경로(Path)를 사용하여 원하는 모양의 메뉴 아이템을 추가합니다.

메인 함수에서 실행될 앱(MyApp)은 ClipPath 위젯을 사용하여 커스텀 클리퍼를 적용한 컨테이너를 만듭니다. Container 내부에는 메뉴 아이템으로 사용할 Text 위젯이 있습니다.

실행 결과

실행하면 아래와 같은 결과를 볼 수 있습니다.

메뉴 디자인 예제 실행 결과

마무리

위 예제를 통해 플러터 앱에서 클리퍼를 사용하여 메뉴 디자인을 구현하는 방법을 알아보았습니다. 클리퍼를 사용하면 다양한 모양의 UI 요소를 만들 수 있으므로, 창의적인 디자인 구현에 응용할 수 있을 것입니다. 더 자세한 사용법은 플러터 공식 문서를 참고해주세요!