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

05 Dec 2023

flutter

이번 예제에서는 플러터 앱의 푸터를 디자인하는 방법에 대해 알아보겠습니다. 푸터는 앱 화면의 맨 아래에 있는 부분으로, 보통 저작권 정보나 연락처 정보 등을 표시하는 용도로 사용됩니다.

클리퍼로 푸터 디자인하기

푸터를 디자인하기 위해 ClipPath 위젯과 CustomClipper 클래스를 사용할 수 있습니다.

Container(
  height: 150,
  child: ClipPath(
    clipper: MyCustomClipper(),
    child: Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          '푸터',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
          ),
        ),
      ),
    ),
  ),
)

위의 코드에서는 Container 위젯을 사용하여 푸터의 크기를 지정하고, ClipPath 위젯을 사용하여 푸터의 모양을 정의하고 있습니다. clipper 속성에는 MyCustomClipper 클래스의 인스턴스를 전달하여 클리핑 모양을 설정하면 됩니다.

MyCustomClipper 클래스는 CustomClipper<Path> 클래스를 상속받아 구현되어야 합니다. 클리퍼는 Path 객체를 반환하기 때문에, 원하는 모양을 Path 객체로 그려주는 로직을 구현해야 합니다.

아래는 예제로 사용될 MyCustomClipper 클래스의 구현입니다.

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, size.height); // 시작점
    path.lineTo(size.width, size.height); // 오른쪽 아래 모서리
    path.lineTo(size.width, size.height - 50); // 오른쪽 위 모서리
    path.quadraticBezierTo(
       size.width / 2, size.height - 100, 0, size.height - 50); // 왼쪽 위 곡선
    path.close();
    return path;
  }

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

위의 코드는 getClip 메소드에서 푸터의 모양을 정의하고 있습니다. path.moveTo를 통해 시작점을 설정하고, path.lineTo를 사용하여 선을 추가하고, path.quadraticBezierTo를 사용하여 곡선을 추가하는 방식으로 클리핑 모양을 정의할 수 있습니다.

마지막으로 shouldReclip 메소드를 오버라이드하여 클리핑 모양이 변경될 필요가 있는지를 지정할 수 있습니다. 이 예제에서는 클리핑 모양이 변경되지 않으므로 항상 false를 반환하도록 설정하였습니다.

결론

위의 예제를 통해 플러터에서 푸터 디자인을 위해 ClipPath와 CustomClipper를 활용하는 방법을 알아보았습니다. 이를 응용하여 원하는 모양의 푸터를 만들어보세요!

클리퍼로 푸터 디자인하기

결론

참고 자료