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

05 Dec 2023

flutter

소개

이 예제는 플러터 앱에서 클리퍼를 이용하여 푸터를 디자인하는 방법을 보여줍니다. 클리퍼를 사용하면 원하는 모양으로 컨테이너를 자를 수 있으며, 이를 이용하여 푸터에 둥근 모양을 적용할 수 있습니다.

예제 코드

아래는 클리퍼를 이용한 푸터 디자인 예제의 코드입니다.

import 'package:flutter/material.dart';

class FooterDesignExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Footer Design Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '앱 컨텐츠',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      bottomNavigationBar: ClipPath(
        clipper: FooterClipper(),
        child: Container(
          height: 80,
          color: Colors.blue,
          child: Center(
            child: Text(
              '푸터',
              style: TextStyle(fontSize: 24, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

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

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

결과

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

푸터 디자인 예제

결론

클리퍼를 이용하여 푸터를 디자인하는 방법을 알아보았습니다. 클리퍼를 이용하면 다양한 모양으로 컨테이너를 자를 수 있으므로, 이를 이용하여 더 다채로운 앱 디자인을 구현할 수 있습니다.