[flutter] superellipse 모양을 이용한 플러터 앱의 바텀 네비게이션 바 디자인 방법

15 Dec 2023

flutter

Flutter로 모바일 앱을 개발하다 보면 보기 좋은 바텀 네비게이션 바를 디자인하고 싶을 때가 있습니다. 이때 바텀 네비게이션 바를 superellipse 모양으로 디자인하는 방법을 알려드리겠습니다.

1. 패키지 설치

우선, superellipse 모양을 구현하기 위해 superellipse_shape 패키지를 사용합니다.

dependencies:
  superellipse_shape: ^0.0.4

위와 같이 pubspec.yaml 파일에 superellipse_shape 패키지를 추가해줍니다. 그리고 flutter pub get을 실행하여 패키지를 설치합니다.

2. 사용 방법

바텀 네비게이션 바의 아이템을 superellipse 모양으로 디자인하는 방법은 간단합니다. superellipse_shape 패키지의 SuperellipseShape 위젯을 이용하면 됩니다.

아래는 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:superellipse_shape/superellipse_shape.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedFontSize: 14,
          unselectedFontSize: 14,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
              backgroundColor: Colors.blue,
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
              backgroundColor: Colors.green,
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'School',
              backgroundColor: Colors.purple,
            ),
          ],
        ),
      ),
    );
  }
}

3. 결과

위 코드를 실행하면 바텀 네비게이션 바의 아이템이 기존의 사각형 모양이 아닌 superellipse 모양으로 디자인된 것을 확인할 수 있습니다.

이렇게 superellipse_shape 패키지를 사용하여 Flutter에서 바텀 네비게이션 바를 superellipse 모양으로 디자인할 수 있습니다.

참고: superellipse_shape 패키지