Spline Navbar #

English README · 中文文档

Introduction #

Spline Navbar is a Flutter bottom navigation bar with rounded rail, notch, badge, and multiple transitions (none / slide / fade / spring). It supports both asset icons and arbitrary widget icons, making it easy to adapt to different visual styles.

Features #

• Notch + badge animation with slide, spring, or fade transitions
• Accepts either asset paths or custom widgets for icons
• Width-aware scaling based on a 390 design width (clamped to avoid extremes)
• Tunable height, badge size, horizontal inset, and colors
• Comes with a runnable example app and basic widget test

Requirements #

• Flutter ≥ 3.0.0
• Dart ≥ 3.0.0

Installation #

Install via pub.dev:

dependencies:
  spline_navbar: ^0.1.4

Using the Git repo:

dependencies:
  spline_navbar:
    git:
      url: https://github.com/liudonjun/spline_navbar
      ref: main

Local path (as in the bundled example):

dependencies:
  spline_navbar:
    path: ..

Usage #

import 'package:spline_navbar/spline_navbar.dart';

SplineNavbar(
  items: const [
    SplineNavbarItem(
      icon: Icon(Icons.home_outlined),
      activeIcon: Icon(Icons.home),
    ),
    SplineNavbarItem(
      icon: Icon(Icons.search),
      activeIcon: Icon(Icons.search_rounded),
    ),
    SplineNavbarItem(
      icon: Icon(Icons.person_outline),
      activeIcon: Icon(Icons.person),
    ),
  ],
  selectedIndex: 0,
  onTap: (index) {},
  backgroundColor: Colors.white,
  borderColor: const Color(0xFF6E7CFF),
  shadowColor: Colors.black12,
  // Default animation
  animation: SplineNavbarAnimation.spring,
  // Per-target override (takes precedence over animation)
  animationResolver: (target) {
    if (target == 1) return SplineNavbarAnimation.fade;
    return SplineNavbarAnimation.spring;
  },
);

See example/lib/main.dart for the full demo.

Screenshots / Demos #

• None
  

  SplineNavbar(
    // ...
    animation: SplineNavbarAnimation.none,
  );
  

• Slide
  

  SplineNavbar(
    // ...
    animation: SplineNavbarAnimation.slide,
  );
  

• Fade
  

  SplineNavbar(
    // ...
    animation: SplineNavbarAnimation.fade,
  );
  

• Spring
  

  SplineNavbar(
    // ...
    animation: SplineNavbarAnimation.spring,
  );
  

Star & Support #

• If this package helps you, please give it a ⭐.
• PRs/issues are welcome; share your usage or ideas in discussions.

Star History #

Buy Me a Coffee #

• If you like this project, feel free to visit my blog: https://blog.ygjoon.cn/