Question:

I’m working on a sidebar menu design in Flutter and I’m trying to replicate the look and feel shown in the design examples below. However, I’m not quite able to achieve the desired result with my current implementation.

Actual Design:

class LayoutWidget extends StatelessWidget {
  const LayoutWidget({super.key});

  @override
  Widget build(BuildContext context) {
    int selectedIndex = 0;
    List<DestinationModal> destinations = [
      DestinationModal(icon: Assets.dashboard, label: 'label'),
      DestinationModal(icon: Assets.dashboard, label: 'label'),
      DestinationModal(icon: Assets.dashboard, label: 'label'),
      DestinationModal(icon: Assets.dashboard, label: 'label'),
    ];
    List<Widget> screens = [
      DashboardScreen(),
      DashboardScreen(),
      DashboardScreen(),
    ];
    return Row(
      children: [
        NavigationRail(
          backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
          useIndicator: false,
          destinations: destinations
              .map(
                (e) => NavigationRailDestination(
                    icon: SvgPicture.asset(e.icon), label: Text(e.label)),
              )
              .toList(),
          selectedIndex: selectedIndex,
        ),
        Expanded(
          child: screens[selectedIndex],
        )
      ],
    );
  }
}