animated_rail 1.0.0
animated_rail: ^1.0.0 copied to clipboard

Flutter Android iOS Linux macOS web Windows

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-02-05-18-24-381.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

future features #

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

Contributions are more than welcomed

11
likes
110
pub points
44%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

youssefaligaber@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on animated_rail