The GSNavigationRail widget is a customizable side navigation bar designed for Flutter applications. It supports a variety of customization options to fit different design requirements and interaction patterns.
API Reference
The GSNavigationRail widget provides a vertical navigation rail that can be used to navigate between different sections or pages of your application. It supports a range of customization options to tailor its appearance and behavior to your specific needs. The following is an illustration of a Themed GSNavigationRail widget with default configuration:

    import 'package:gluestack_ui/gluestack_ui.dart';
      selectedIndex: _selectedIndex,
      groupAlignment: groupAlignment,
      onDestinationSelected: (int index) {
        setState(() {
          _selectedIndex = index;
      labelType: labelType,
      destinations: const <GSNavigationRailDestination>[
          icon: Icon(Icons.favorite_border),
          selectedIcon: Icon(Icons.favorite),
          label: Text('First'),
          icon: Badge(child: Icon(Icons.bookmark_border)),
          selectedIcon: Badge(child: Icon(,
          label: Text('Second'),
          icon: Badge(
            label: Text('4'),
            child: Icon(Icons.star_border),
          selectedIcon: Badge(
            label: Text('4'),
            child: Icon(,
          label: Text('Third'),

API Reference


To use this widget in your project, include the following import statement in your file.
import "package:gluestack_ui/gluestack_ui.dart"


  • backgroundColor: The background color of the navigation rail.
  • extended: Whether the navigation rail is extended.
  • leading: A widget to be placed at the leading edge of the navigation rail.
  • trailing: A widget to be placed at the trailing edge of the navigation rail.
  • destinations: A list of GSNavigationRailDestination objects representing the destinations in the navigation rail.
  • selectedIndex: The index of the currently selected destination.
  • onDestinationSelected: A callback function to be called when a destination is selected.
  • elevation: The elevation of the navigation rail.
  • groupAlignment: The alignment of the destination groups within the navigation rail.
  • labelType: The type of labels to display for the destinations.
  • unselectedLabelTextStyle: The text style for unselected labels.
  • selectedLabelTextStyle: The text style for selected labels.
  • unselectedIconTheme: The icon theme for unselected icons.
  • selectedIconTheme: The icon theme for selected icons.
  • minWidth: The minimum width of the navigation rail.
  • minExtendedWidth: The minimum width of the navigation rail when extended.
  • useIndicator: Whether to display an indicator for the selected destination.
  • indicatorColor: The color of the indicator.
  • indicatorWidth: The width of the indicator.
  • indicatorShape: The shape of the indicator.
  • style: The style configuration for the navigation rail.
  • size: The size configuration for the navigation rail.
Edit this page on GitHub