Home > database >  How to style NavigationRailDestination?
How to style NavigationRailDestination?

Time:11-09

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

CodePudding user response:

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

  • Related