How to place Widget in destination in NavigationRail

Question

I would like to know how to place a List in destinations in NavigationRail

  Widget build(BuildContext context) {
    return NavigationRail(
      minWidth: width,
      selectedIndex: currentPageIndex,
      labelType: NavigationRailLabelType.all,
      onDestinationSelected: _setIndex,
      destinations: const [
        animatedNavigationItem(
          child: const NavigationDestination(
            icon: Icon(Icons.home_rounded),
            label: 'Home',
          ), 
          index: 0,
        ),
        animatedNavigationItem(
          child: const NavigationDestination(
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          index: 1,
        ),
        animatedNavigationItem(
          child: const NavigationDestination(
          icon: Icon(Icons.bookmark),
          label: 'Saved',
        ),
          index: 2,
        ),
        animatedNavigationItem(
          child: const NavigationDestination(
            icon: Icon(Icons.mail_rounded),
            label: 'Messages',
          ),
          index: 3,
        ),
        animatedNavigationItem(
          child: const NavigationDestination(
            icon: Icon(Icons.person_rounded),
            label: 'Profile',
          ),
          index: 4,
        ),
      ]
    );
  }

But NavigationRail {required List destinations}. so I can’t place Widget.

I’d like to know how to change this to be able to place a Widget.

Error:The element type 'Container' can't be assigned to the list type 'NavigationRailDestination'.

as on NavigationBar

  Widget build(BuildContext context) {
    return NavigationBar(
      selectedIndex: currentPageIndex,
      labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
      onDestinationSelected: setIndex,
      height: height,
      destinations: [
        animatedNavigationItem(
          child: const NavigationDestination(
            icon: Icon(Icons.home_rounded),
            label: 'Home',
          ), 
          index: 0,
        ),
        animatedNavigationItem(
          child: const NavigationDestination(
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          index: 1,
        ),
        animatedNavigationItem(
          child: const NavigationDestination(
          icon: Icon(Icons.bookmark),
          label: 'Saved',
        ),
          index: 2,
        ),
        animatedNavigationItem(
          child: const NavigationDestination(
            icon: Icon(Icons.mail_rounded),
            label: 'Messages',
          ),
          index: 3,
        ),
        animatedNavigationItem(
          child: const NavigationDestination(
            icon: Icon(Icons.person_rounded),
            label: 'Profile',
          ),
          index: 4,
        ),
      ],
    );
  }

{required List destinations}

user_10156430 · Answer

NavigationRailDestination is NOT the same of the NavigationDestination

Use NavigationRailDestination on NavigationRail and

NavigationDestination on NavigationBar.

Label require Text widget on NavigationRailDestination. See the differences:

      NavigationDestination(
        icon: const Icon(Icons.home_outlined),
        label: 'Home',
        selectedIcon: const Icon(Icons.home),
      ),    

    
      NavigationRailDestination(
        icon: const Icon(Icons.home_outlined),
        label: Text('Home'),
        selectedIcon: const Icon(Icons.home),
      ),

AND Your function animatedNavigationItem has to return the same widget type, NavigationDestination OR NavigationRailDestination, in accord to the parent widget.

If you want to animate, it is better animate the icon widget. try AnimatedIcon class, you can build your own animated icon.

How to place Widget in destination in NavigationRail

1 Answers