如何更改所选NavigationRailDestination的颜色？

Question

可以使用以下代码轻松创建导航栏：

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

上面的代码会使整个导航栏变成蓝色，那么如何将所选导航栏的颜色更改为白色呢？未选定的保持蓝色，只有选定的才会更改为其他颜色。

这是一个dribbble设计，我想做这样的事情：

Answer 1

你应该尝试一下这个

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'),
              ),
            ),
          ),
        ],
      ),

Answer 2

所以你想要这样

  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'),
              ),
            ],
          ),

您还可以更改

Text('First',style:TextStyle(color:Colors.white)),

不要尝试更改

NavigationRail

仅更改

Icon

或

Text

小部件

应用程序中所有 NavigationRails 的外观都可以使用 NavigationRailTheme 指定。因此，您需要创建 ThemeData 并指定所有内容。

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

截图后编辑。 那不是导航铁路。您专门询问了 NavigationRail Widget，我回答了。更好的问题是“如何在颤振中实现这一点”，这是一个自定义小部件。这样你就会激怒那些试图帮助你的人。您最好使用该屏幕截图创建新问题，并且没有可以执行此操作的小部件，您需要创建一个容器和一个 ListView，然后为每个 ListTile 创建一个容器。查看 YouTube 上的 Flutter Way 频道：https://www.youtube.com/watch?v=LN668OAUrK4 并了解如何创建自定义布局

Answer 3

我知道这个问题已有十亿年历史了，但我最近遇到了一个非常相似的问题。我刚刚花了一周时间重新设计了一堆 Flutter 小部件，并发布了包含结果的

custom_adaptive_scaffold

包。