arc_notch_bottom_nav 0.1.0

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

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: const ArcNotchBottomNavCenterAction(
          child: Icon(CupertinoIcons.pen),
        ),
      ),
    );
  }
}

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.