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

05 Dec 2023

flutter

플러터(Flutter)는 모바일 앱을 개발하기 위한 UI 프레임워크로, 다양한 디자인 요소를 적용할 수 있습니다. 이번 예제에서는 클리퍼(Clipper)를 사용하여 푸터(Footer)를 디자인하는 방법을 알아보겠습니다.

1. 클리퍼란?

클리퍼는 플러터에서 사용되는 그래픽 클리핑 기능입니다. 클리핑은 모양을 만드는 도구로 구체적인 모양을 가지고 있는 영역을 지정하여 해당 영역 내부에만 그리도록 설정하는 것을 의미합니다.

2. 푸터 디자인하기

푸터는 앱의 맨 아래에 위치하여 추가 정보를 제공하는 역할을 합니다. 클리퍼를 사용하여 푸터를 디자인해보겠습니다.

import 'package:flutter/material.dart';

class CustomFooterClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height);
    path.quadraticBezierTo(size.width / 2, size.height - 40, size.width, size.height);
    path.lineTo(size.width, 0);
    return path;
  }

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

class FooterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: CustomFooterClipper(),
      child: Container(
        color: Colors.blue,
        height: 80,
        width: MediaQuery.of(context).size.width,
        child: Center(
          child: Text(
            'This is a footer',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Footer Example'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Center(
                child: Text(
                  'Your App Content',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
            FooterWidget(),
          ],
        ),
      ),
    ),
  );
}

3. 코드 설명

CustomFooterClipper 클래스: CustomClipper<Path> 클래스를 상속받아 클리퍼를 구현합니다. getClip() 메서드에서 클리핑 영역을 지정합니다.
FooterWidget 클래스: 클리퍼를 적용한 푸터 위젯을 정의합니다. ClipPath 위젯의 clipper 속성에 CustomFooterClipper 인스턴스를 전달하여 클리퍼를 적용합니다. 푸터의 색상, 크기, 텍스트 등을 설정할 수 있습니다.
main() 함수: 앱의 진입점으로, 앱 바, 컨텐츠, 푸터를 포함한 앱 구조를 구현합니다.

4. 실행 결과

푸터 예제

실행 결과, 푸터가 화면 맨 아래에 표시되며 더 많은 정보를 제공할 수 있습니다.

5. 마무리

이 예제를 통해 클리퍼를 사용하여 플러터 앱의 푸터를 디자인하는 방법을 알아보았습니다. 클리퍼를 사용하면 더 다양한 모양의 디자인을 구현할 수 있으며, 앱의 전체적인 사용자 경험을 향상시킬 수 있습니다.