flutter：如何设置导航栏的样式

Question

我想搭配

bottomNavigationBar

的figma设计:

这是代码：

return Scaffold(
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          logDebug('selected index: $index');
          setState(() {
            selectedPageIndex = index;
          });
        },
        selectedIndex: selectedPageIndex,
        destinations: <NavigationDestination>[
          const NavigationDestination(
            selectedIcon: Icon(
              Icons.home,
              size: 37,
              color: primaryColor,
            ),
            icon: Icon(
              Icons.home_outlined,
              size: 37,
              color: primaryColor,
            ),
            label: 'Home',
          ),
          const NavigationDestination(
            selectedIcon: Icon(
              Icons.ev_station,
              size: 37,
              color: primaryColor,
            ),
            icon: Icon(
              Icons.ev_station_outlined,
              size: 37,
              color: primaryColor,
            ),
            label: 'someLable',
          ),
          NavigationDestination(
            selectedIcon: const Icon(Icons.car_repair),
            icon: Image.asset(
              'assets/images/car_repair.png',
              width: 40,
              color: primaryColor,
            ),
            label: 'Services',
          ),
          const NavigationDestination(
            selectedIcon: Icon(
              Icons.stars,
              size: 37,
              color: primaryColor,
            ),
            icon: Icon(
              Icons.stars_outlined,
              size: 37,
              color: primaryColor,
            ),
            label: 'Points',
          ),
          const NavigationDestination(
            selectedIcon: Icon(
              Icons.person_2,
              size: 37,
              color: primaryColor,
            ),
            icon: Icon(
              Icons.person_2_outlined,
              size: 37,
              color: primaryColor,
            ),
            label: 'Profile',
          ),
        ],
      ),
      body: SafeArea(
        child: Text("hellp"),
      ),
    );

但问题是导航栏的最终外观是这样的

有什么办法可以改变indcitor的样式以匹配figma设计（颜色可以稍后更改）

Answer 1

指标背后的逻辑可以是您想要的任何逻辑。 在 Figma 设计中，指示器覆盖了完整的 Icon 和 Label，而在您的设计中，它只是覆盖了 Icon。

如果这是您唯一的问题，请找出正在填充的元素的逻辑，并将其调整为整个按钮的完整宽度和高度，而不仅仅是图标。

使用与当前相同的逻辑，您可以根据需要更改指示器的外观。