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

05 Dec 2023

flutter

안녕하세요! 오늘은 플러터(Flutter) 앱 개발을 통해 푸터(footer) 디자인을 예제로 알아보겠습니다.

1. 클리퍼(Clipper)란?

클리퍼는 플러터에서 사용되는 그래픽 영역을 자르는 기능을 제공하는 위젯입니다. 이를 이용하면 사용자가 원하는 모양으로 커스텀한 디자인을 구현할 수 있습니다.

2. 푸터 디자인 예제 구현하기

아래의 예제 코드는 플러터를 이용하여 푸터 디자인을 구현하는 방법을 보여줍니다.

import  'package:flutter/material.dart';
 
class FooterClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, size.height - 20);

    var firstControlPoint = Offset(size.width / 4, size.height);
    var firstEndPoint = Offset(size.width / 2.25, size.height - 30);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);

    var secondControlPoint =
        Offset(size.width - (size.width / 3.25), size.height - 65);
    var secondEndPoint = Offset(size.width, size.height - 40);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);

    path.lineTo(size.width, size.height - 40);
    path.lineTo(size.width, 0);
    path.close();
    
    return path;
  }
 
  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 앱 컨텐츠 영역
          // ...
          // 푸터 영역
          ClipPath(
            clipper: FooterClipper(),
            child: Container(
              height: 150,
              color: Colors.blue,
              child: // 푸터 내용
            ),
          ),
        ],
      ),
    );
  }
}

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

3. 예제 설명

예제 코드에서는 CustomClipper를 상속받아 Path를 반환하는 FooterClipper 클래스를 정의합니다. Path는 클리퍼가 영향을 주는 영역을 정의하는데 사용되는 도형입니다. getClip 메서드에서는 원하는 디자인에 맞게 Path를 구성하여 반환하면 됩니다.

MyHomePage 위젯에서는 앱의 컨텐츠 영역과 푸터 영역을 구성합니다. ClipPath 위젯을 사용하여 클리퍼를 적용하고, Container 위젯을 통해 푸터의 높이와 배경색 등을 지정할 수 있습니다. 이 곳에 원하는 푸터 내용을 추가하면 완성됩니다.

4. 실행 결과

아래는 예제 코드를 실행한 결과입니다.

플러터 푸터 예제

5. 마무리

이번 예제를 통해 클리퍼를 이용하여 플러터 앱의 푸터 디자인을 구현하는 방법을 알아보았습니다. 클리퍼를 활용하면 다양한 모양의 커스텀 디자인을 구현할 수 있으니 참고해보세요. 감사합니다!