[flutter] 앱 라운드 네비게이션 바 디자인을 위한 클리퍼 사용 예제

05 Dec 2023

flutter

앱의 디자인을 개선하기 위한 한 가지 방법은 라운드 네비게이션 바를 추가하는 것입니다. Flutter에서는 이를 구현하기 위해 클리퍼(clipper)를 사용할 수 있습니다. 클리퍼를 사용하면 원하는 모양의 네비게이션 바를 만들 수 있습니다. 이번 포스트에서는 앱 라운드 네비게이션 바를 만들기 위해 클리퍼를 어떻게 사용하는지 알아보겠습니다.

Step 1: `CustomClipper` 클래스 생성

먼저, CustomClipper 클래스를 생성하여 원하는 모양의 네비게이션 바를 만듭니다. 아래는 샘플 코드입니다.

import 'package:flutter/material.dart';

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

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

getClip 메서드에서 원하는 모양의 클리핑 경로를 정의합니다. 위의 예제에서는 밑으로 내려가는 곡선 모양의 경로를 정의하였습니다. shouldReclip 메서드에서는 클리퍼를 다시 그릴지 여부를 결정합니다. 위의 예제에서는 false를 반환하여 한 번 정의된 경로가 다시 그려지지 않도록 설정했습니다.

Step 2: 네비게이션 바에 클리퍼 적용하기

이제 앱의 네비게이션 바에 위에서 생성한 CustomClipper를 적용해야 합니다.

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        ...
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(80),
          child: ClipPath(
            clipper: AppClipper(),
            child: Container(
              color: Colors.blue,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  IconButton(
                    icon: Icon(Icons.home),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.settings),
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
      ...
    );
  }
}

ClipPath 위젯을 사용하여 네비게이션 바를 감싸고, clipper 속성에 AppClipper 클래스를 전달하여 클리퍼를 적용합니다. 그리고 내부에 원하는 스타일과 아이콘을 추가하면 됩니다.

결론

이렇게 하면 Flutter에서 앱의 라운드 네비게이션 바를 구현할 수 있습니다. 클리퍼를 활용하여 다양한 모양의 네비게이션 바를 만들 수 있으니, 디자인에 창의성을 발휘해보세요!

Step 1: CustomClipper 클래스 생성

Step 2: 네비게이션 바에 클리퍼 적용하기

결론

Step 1: `CustomClipper` 클래스 생성