Animated Naviation Rail for Flutter

Pub

Flutter Animated Naviation Rail with multiple cool effects see example project.

Android-Emulator---Pixel_3_XL_API_29_5554-2021-06-19-11-48-34.gif

Getting Started

Add the package to your pubspec.yaml:

animated_rail: any

In your dart file, import the library:

import 'package:animated_rail/index.dart';
  AnimatedRail(
        activeColor: Colors.purple,
        background: hexToColor('#8B77DD'),
        maxWidth: 275,
        width: 100,
        expand: false,
        isStatic: true,
        items: [
          RailItem(
              icon: Icon(Icons.home),
              label: "Home",
              screen: _buildScreen('Home')),
          RailItem(
              icon: Icon(Icons.message_outlined),
              label: 'Messages',
              screen: _buildScreen('Messages')),
          RailItem(
              icon: Icon(Icons.notifications),
              label: "Notification",
              screen: _buildScreen('Notification')),
          RailItem(
              icon: Icon(Icons.person),
              label: 'Profile',
              screen: _buildScreen('Profile')),
        ],
      )

Parameters:

NameDescriptionRequiredDefault value
itemsthe tabs of the rail as a list of object type RailItemrequired-
widththe width of the rail when it is openedrequired100
maxWidththe max width the rai will snap to, active when exapnd is equal true-350
directiondirection of rail if it is on the right or leftrequiredTextDirection.ltr
iconBackgrounddefault icon background color if the RailItem doesn't have one-white
activeColordefault active color for text and icon if the RailItem doesn't have one-primary color
iconColordefault inactive icon and text color if the RailItem doesn't have one--
selectedIndexcurrent selected Index dont use it unlessa you want to change the tabs programmatically-0
backgroundbackground of the rail-0
expandif true the the rail can exapnd and reach maxWidth and the animation for text will take effect-true
isStaticif true the rail will not move vertically-false

Beamer example

example using beamer navigation library with back navigation support

future features

  • full custom tab
  • add more customization to rail item
  • custom rail pointer
  • custom rail shape

Contributions are more than welcomed

Libraries

animated_rail
AnimatedRail
AnimatedRailRaw
interpolate
PointPainter
RailItem
RailTile