CODEWITHSUNDEEP
flutterdart
gegobyte
gegobyte

Reputation: 5545

How to change color of the selected NavigationRailDestination?

A navigation rail can be created easily using the below code:

NavigationRail(
  extended: true,
  backgroundColor: Colors.blue,
  destinations: [
    NavigationRailDestination(
      icon: Icon(...),
      label: Text('Dashboard'),
    ),      
  ],
),

The above code will make the entire navigation rail blue so how to change the color of the selected navigation rail to white? Unselected ones remain blue and only the selected one gets changed to a different color.

Here is a dribbble design, I want to do something like this:

enter image description here

Upvotes: 3

Views: 5066

Answers (3)

Hans Kokx
Hans Kokx

Reputation: 559

I know this question is a billion years old, but I ran into a very similar problem recently. I just spent a week reworking a bunch of Flutter widgets and published the custom_adaptive_scaffold package with the results. Hint: use CustomNavigationRail with CustomNavigationDestination and CustomNavigationRailThemeData.

Upvotes: 0

Flak
Flak

Reputation: 2670

So you want like this

  NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },  backgroundColor: Colors.blue,

            labelType: NavigationRailLabelType.selected,
            destinations: const <NavigationRailDestination>[
              NavigationRailDestination(
                icon: Icon(Icons.favorite_border, color: Colors.white),
                selectedIcon: Icon(Icons.favorite,color: Colors.green),
                label: Text('First'),
                
              ),
              NavigationRailDestination(
                icon: Icon(Icons.bookmark_border,color: Colors.white),
                selectedIcon: Icon(Icons.book,color: Colors.green),
                label: Text('Second'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.star_border,color: Colors.white),
                selectedIcon: Icon(Icons.star,color: Colors.green),
                label: Text('Third'),
              ),
            ],
          ),

You can also change Text('First',style:TextStyle(color:Colors.white)),

Don't try to change NavigationRail change only Icon or Text widgets

The appearance of all of the NavigationRails within an app can be specified with NavigationRailTheme. So you need to create ThemeData and specify everything.

https://api.flutter.dev/flutter/material/NavigationRailTheme-class.html

Edit after Screenshot. thats not NavigationRail. You asked specifically for NavigationRail Widget, and I answered that. Better question is "How to achive this in flutter" and thats a custom widget. This way you pissoff people trying to help you. You better create new question with that screenshot, and There is no Widget that does that, you have te create, start with a container and a ListView then a container for each ListTile. Check The Flutter Way channel on you tube: https://www.youtube.com/watch?v=LN668OAUrK4 and learn how to create custom layouts

enter image description here

Upvotes: 0

Jahidul Islam
Jahidul Islam

Reputation: 12575

you should try out this

Row(
        children: <Widget>[

          NavigationRail(
            selectedIconTheme: IconThemeData(
              color: Colors.white,
            ),
            selectedLabelTextStyle: TextStyle(
              color: Color(0xffFCCFA8),
              fontSize: 13,
              letterSpacing: 0.8,
              decoration: TextDecoration.underline,
              decorationThickness: 2.0,
            ),
            unselectedLabelTextStyle: TextStyle(
              fontSize: 13,
              letterSpacing: 0.8,
            ),
            backgroundColor: Colors.blue,
            selectedIndex: _selectedIndex,
            destinations: [
              NavigationRailDestination(
                icon: icon,
                label: Text('Menu 1'),
              ),
              NavigationRailDestination(
                icon: icon,
                label: Text('Menu 2'),
              ),
              NavigationRailDestination(
                icon: icon,
                label: Text('Menu 3'),
              ),
            ],
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
          ),
          Expanded(
            child: Container(
              color: Colors.green,
              child: Center(
                child: Text('Content of Menu $_selectedIndex'),
              ),
            ),
          ),
        ],
      ),

Upvotes: 1

Related Questions