AnimatedBottomNavigationBar

The navigation bar supports 2, 3, 4, or 5 elements and offers several customization properties to match your UI:

• gapLocation: Determines where the notch is placed relative to the FloatingActionButton. Options include GapLocation.center and GapLocation.end.
• notchSmoothness: Controls the visual style of the notch. Available values include:
  • NotchSmoothness.defaultEdge
  • NotchSmoothness.softEdge
  • NotchSmoothness.smoothEdge
  • NotchSmoothness.verySmoothEdge
• leftCornerRadius / rightCornerRadius: Sets the rounding of the bar's outer corners.
• icons: A list of icons used when using the standard AnimatedBottomNavigationBar constructor.

To change the launch screen image for the iOS version of the application, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.

Using Xcode:

1. Open the iOS project in Xcode by running open ios/Runner.xcworkspace from your terminal.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog to replace the existing launch screen assets.

To change the active tab, you must update the activeIndex property passed to the AnimatedBottomNavigationBar. This is typically done by calling setState() in a StatefulWidget, which triggers a re-render and allows the widget to run its built-in animations to the new index.

class _MyAppState extends State<MyApp> {
  int activeIndex;

  /// Handler for when you want to programmatically change
  /// the active index. Calling `setState()` here causes
  /// Flutter to re-render the tree, which `AnimatedBottomNavigationBar`
  /// responds to by running its normal animation.
  void _onTap(int index) {
    setState((){
      activeIndex = index;
    });
  }

  Widget build(BuildContext context) {
    return AnimatedBottomNavigationBar(
      activeIndex: activeIndex,
      onTap: _onTap,
      // other params
    );
  }
}

To use the navigation bar, place either AnimatedBottomNavigationBar or AnimatedBottomNavigationBar.builder in the bottomNavigationBar slot of a Flutter Scaffold. The widget is designed to respect the FloatingActionButtonLocation (e.g., FloatingActionButtonLocation.centerDocked) to create notched effects.

Scaffold(
   body: Container(), // destination screen
   floatingActionButton: FloatingActionButton(
      // params
   ),
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   bottomNavigationBar: AnimatedBottomNavigationBar(
      icons: iconList,
      activeIndex: _bottomNavIndex,
      gapLocation: GapLocation.center,
      notchSmoothness: NotchSmoothness.verySmoothEdge,
      leftCornerRadius: 32,
      rightCornerRadius: 32,
      onTap: (index) => setState(() => _bottomNavIndex = index),
      // other params
   ),
);

The AnimatedBottomNavigationBar supports custom animations for its notch and corner transitions. To achieve this, pass an Animation<double> to the notchAndCornersAnimation property. This is typically driven by an AnimationController within your StatefulWidget.

// Inside your State class
late AnimationController _animationController;
late Animation<double> animation;

@override
void initState() {
  super.initState();
  _animationController = AnimationController(
    duration: Duration(seconds: 1),
    vsync: this,
  );
  // Define the animation curve and interval
  animation = Tween<double>(begin: 0, end: 1).animate(
    CurvedAnimation(parent: _animationController, curve: Curves.fastOutSlowIn),
  );
}

// In build method
AnimatedBottomNavigationBar(
  // ... other properties
  notchAndCornersAnimation: animation,
)

To apply a blur effect to the navigation bar (useful when the background has transparency), set blurEffect to true and provide a blurFilter.

If blurFilter is not provided, it defaults to ImageFilter.blur(sigmaX: 5, sigmaY: 10).

AnimatedBottomNavigationBar(
  icons: [Icons.home, Icons.search, Icons.person],
  activeIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  backgroundColor: Colors.white.withOpacity(0.5),
  blurEffect: true,
  blurFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
)

Use the .builder constructor when you want to render custom widgets instead of simple icons for each tab. You must provide an itemCount and a tabBuilder function.

The tabBuilder signature: Widget Function(int index, bool isActive)

• index: The index of the current tab.
• isActive: A boolean indicating if this tab is currently selected.

AnimatedBottomNavigationBar.builder(
  itemCount: 3,
  activeIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  tabBuilder: (index, isActive) {
    return MyCustomTabWidget(
      icon: _myIcons[index],
      isActive: isActive,
    );
  },
)