arc_notch_bottom_nav

English | 简体中文

A Flutter bottom navigation package with a configurable arc-notch layout and center action button.

Demo

Features

• Arc-notch bottom navigation layout with a raised center action
• Configurable items, badges, theme, layout, and animation
• Scaffold wrapper for binding pages and tabs together
• Backward-compatible CurvedBottomNavigationBar API
• Example app included

Installation

dependencies:
  arc_notch_bottom_nav: ^0.1.0

For local development:

dependencies:
  arc_notch_bottom_nav:
    path: ../arc_notch_bottom_nav

Usage

import 'package:arc_notch_bottom_nav/arc_notch_bottom_nav.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int currentIndex = 0;

  static const items = [
    ArcNotchBottomNavItem(
      id: 'bookshelf',
      label: 'Bookshelf',
      inactiveIcon: CupertinoIcons.book,
      activeIcon: CupertinoIcons.book_fill,
    ),
    ArcNotchBottomNavItem(
      id: 'stats',
      label: 'Stats',
      inactiveIcon: CupertinoIcons.chart_bar,
      activeIcon: CupertinoIcons.chart_bar_fill,
    ),
    ArcNotchBottomNavItem(
      id: 'review',
      label: 'Review',
      inactiveIcon: Icons.blur_circular_outlined,
      activeIcon: Icons.blur_circular,
    ),
    ArcNotchBottomNavItem(
      id: 'profile',
      label: 'Profile',
      inactiveIcon: CupertinoIcons.person,
      activeIcon: CupertinoIcons.person_fill,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: currentIndex,
        children: items.map((item) => Center(child: Text(item.label))).toList(),
      ),
      bottomNavigationBar: ArcNotchBottomNav(
        items: items,
        currentIndex: currentIndex,
        onItemSelected: (int index) => setState(() => currentIndex = index),
        centerAction: ArcNotchBottomNavCenterAction.filled(
          showShellBackground: false,
          showShellBorder: false,
          child: Container(
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Color(0xFFDCCCB8),
                  Color(0xFFB98F54),
                ],
              ),
            ),
            child: const Center(
              child: Icon(
                CupertinoIcons.pen,
                size: 24,
                color: Color(0xFFFDF8F1),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

You can switch the center button content style with the exported constructors:

centerAction: const ArcNotchBottomNavCenterAction.icon(
  icon: CupertinoIcons.pen,
)

centerAction: const ArcNotchBottomNavCenterAction.backgroundIcon(
  icon: CupertinoIcons.pen,
  iconSize: 20,
  iconBackgroundColor: Color(0x73DDD7CF),
)

centerAction: ArcNotchBottomNavCenterAction.filled(
  showShellBackground: false,
  showShellBorder: false,
  child: YourCircularWidget(),
)

Center Action Styles

• icon: icon only, with iconSize and iconColor.
• backgroundIcon: shell background + icon, with iconSize, iconColor, and iconBackgroundColor.
• filled: let your own circular content fill the whole center button area.

Shell Options

All center action styles support shell configuration:

centerAction: ArcNotchBottomNavCenterAction.backgroundIcon(
  icon: CupertinoIcons.pen,
  showShellBackground: true,
  shellBackgroundColor: Color(0xFFB98F54),
  showShellBorder: false,
  onTap: () {},
)

• showShellBackground: whether to paint the outer shell background.
• shellBackgroundColor: overrides the outer shell background color.
• showShellBorder: whether to paint the outer shell border.
• shellBorderColor: overrides the outer shell border color.
• shellBorderWidth: overrides the outer shell border width.

Main API

• ArcNotchBottomNav
• ArcNotchBottomNavScaffold
• ArcNotchBottomNavItem
• ArcNotchBottomNavCenterAction
• ArcNotchBottomNavThemeData
• ArcNotchBottomNavLayoutData
• ArcNotchBottomNavAnimationData

Notes

• Use ArcNotchBottomNavScaffold when you want items and pages managed together.
• The example app in example/lib/main.dart shows a full-page setup.
• The legacy CurvedBottomNavigationBar wrapper remains available for gradual migration.

Libraries

arc_notch_bottom_nav

common_widget_kit