animated_rail 1.0.6 icon indicating copy to clipboard operation
animated_rail: ^1.0.6 copied to clipboard

Flutter Animated Navigation Rail with multiple cool effects and options like closing and openeing the rail.

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 [RailItem]required-
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

38
likes
130
pub points
68%
popularity

Publisher

unverified uploader

Flutter Animated Navigation Rail with multiple cool effects and options like closing and openeing the rail.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on animated_rail