[flutter] 클리퍼를 이용한 앱 로고 디자인 예제

05 Dec 2023

flutter

앱을 개발할 때, 잘 디자인된 로고는 사용자에게 강력한 인상을 남기고 앱의 브랜드를 대표하는 중요한 요소입니다. 이번 예제에서는 Flutter를 사용하여 클리퍼(clipper)를 이용한 앱 로고 디자인 방법을 소개하겠습니다.

클리퍼란?

클리퍼는 Flutter에서 도형의 형태를 바꾸는 데 사용되는 도구입니다. 원, 사각형, 다각형 등 다양한 모양을 만들 수 있습니다. 클리퍼를 사용하면 원하는 모양의 로고를 만들 수 있으며, 애니메이션 효과를 적용할 수도 있습니다.

예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: LogoPage(),
  ));
}

class LogoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('앱 로고'),
      ),
      body: Center(
        child: ClipPath(
          clipper: LogoClipper(),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

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

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

코드 설명

이 예제에서는 LogoClipper라는 이름의 커스텀 클리퍼를 생성합니다. getClip 함수에서는 원하는 형태의 로고를 그리는 로직을 작성합니다. 여기서는 네 개의 점을 연결하여 삼각형 모양의 로고를 만들었습니다.

LogoPage 위젯에서는 LogoClipper를 이용하여 ClipPath 위젯을 생성하고, 이를 앱 화면 가운데에 배치합니다. Container 위젯으로 둘러싼 로고는 Color 속성을 통해 파란색으로 채워집니다.

결과 화면

결론

클리퍼를 사용하여 Flutter 앱의 로고를 디자인하는 예제를 살펴보았습니다. 클리퍼를 사용하면 다양한 형태의 로고를 만들 수 있으며, 원하는 애니메이션 효과도 추가할 수 있습니다. 앱의 브랜드를 대표하는 로고는 사용자의 인상을 강력하게 남기므로, 앱 개발시 로고 디자인에도 신경을 쓰시기 바랍니다.