Search code examples
flutterdartuser-interfacemenuflutter-layout

How to style NavigationRailDestination?


I have a List of NavigationRailDestinations which I would like to have a circular white background, among other things. How can I style this Widget? Wrapping it with a Container doesn't work since NavigationRailonly accepts a list of NavigationRailDestinations. Any ideas on how I can achieve this?

List<NavigationRailDestination> _buildDestinations() {
    return [
      const NavigationRailDestination(
        icon: Icon(
          Icons.home_outlined,
        ),
        label: Text('Dashboard'),
      ),
      const NavigationRailDestination(
        icon: Icon(
          Icons.person_outline_rounded,
        ),
        label: Text('Profile'),
      ),
      const NavigationRailDestination(
        icon: Icon(
          Icons.coffee_outlined,
        ),
        label: Text('Jobs'),
      ),
      const NavigationRailDestination(
        icon: Icon(
          Icons.event_note_rounded,
        ),
        label: Text('Events'),
      ),
    ];
  }

UI Design


Solution

  • For setting background for icon you can do this:

    NavigationRailDestination(
        icon: Container(
          height: 40,
          decoration: BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
          ),
          child: Icon(
            Icons.home_outlined,
          ),
        ),
        label: Text('Dashboard'),
      ),
    

    enter image description here