bottomNavigationBarStory top-level property

Implementation

Story bottomNavigationBarStory = Story(
  name: 'Bottom Navigation Bar',
  builder: (context) {
    final bottomNavBarType = context.knobs.options(
      label: 'Bottom Navigation Bar Type',
      options: [
        Option(label: 'Labelled', value: BottomNavBarType.labelled),
        Option(label: 'Only Icons', value: BottomNavBarType.onlyIcons),
        Option(label: 'Shiftable', value: BottomNavBarType.shiftable),
        Option(label: 'Badged', value: BottomNavBarType.badged),
        Option(label: 'Floating', value: BottomNavBarType.floating),
        Option(label: 'Extended', value: BottomNavBarType.extended),
      ],
      initial: BottomNavBarType.labelled,
    );

    final navBarHeight = context.knobs.slider(
      label: 'Navigation Bar Height',
      initial: 80.0,
      min: 40.0,
      max: 100.0,
    );

    final selectedItemColor = context.knobs.options(
      label: 'Selected Item Color',
      options: [
        Option(label: 'Blue', value: Colors.blue),
        Option(label: 'Red', value: Colors.red),
        Option(label: 'Green', value: Colors.green),
      ],
      initial: Colors.blue,
    );

    final unselectedItemColor = context.knobs.options(
      label: 'Unselected Item Color',
      options: [
        Option(label: 'Grey', value: Colors.grey),
        Option(label: 'Black', value: Colors.black),
        Option(label: 'White', value: Colors.white),
        Option(label: 'Dark Grey', value: Colors.grey[700]),
      ],
      initial: Colors.grey,
    );

    final backgroundColor = context.knobs.options(
      label: 'Background Color',
      options: [
        Option(label: 'White', value: Colors.white),
        Option(label: 'Black', value: Colors.black),
        Option(label: 'Blue', value: Colors.blue),
        Option(label: 'Grey', value: Colors.grey),
        Option(label: 'Light Blue', value: Colors.lightBlue),
        Option(label: 'Green', value: Colors.green),
      ],
      initial: Colors.white,
    );

    final shadowColor = context.knobs.options(
      label: 'Shadow Color',
      options: [
        Option(label: 'Black', value: Colors.black),
        Option(label: 'White', value: Colors.white),
        Option(label: 'Blue', value: Colors.blue.withOpacity(0.5)),
        Option(label: 'Orange', value: Colors.orange.withOpacity(0.5)),
        Option(label: 'Purple', value: Colors.purple.withOpacity(0.3)),
        Option(label: 'None', value: Colors.transparent),
      ],
      initial: Colors.black,
    );

    final hasBadge = context.knobs.boolean(
      label: 'Show Badges',
      initial: false,
    );

    final badgeColor = context.knobs.options(
      label: 'Badge Color',
      options: [
        Option(label: 'Red', value: Colors.red),
        Option(label: 'Blue', value: Colors.blue),
        Option(label: 'Green', value: Colors.green),
      ],
      initial: Colors.red,
    );

    final showFabActions = context.knobs.boolean(
      label: 'Show Extended Actions',
      initial: true,
    );

    final fabAction1Icon = context.knobs.options(
      label: 'Extended Action 1 Icon',
      options: [
        Option(label: 'Message', value: Icons.message),
        Option(label: 'Email', value: Icons.email),
        Option(label: 'Chat', value: Icons.chat),
      ],
      initial: Icons.message,
    );

    final fabAction2Icon = context.knobs.options(
      label: 'Extended Action 2 Icon',
      options: [
        Option(label: 'Notifications', value: Icons.notifications),
        Option(label: 'Alarm', value: Icons.alarm),
        Option(label: 'Bell', value: Icons.notification_important),
      ],
      initial: Icons.notifications,
    );

    final fabAction3Icon = context.knobs.options(
      label: 'Extended Action 3 Icon',
      options: [
        Option(label: 'Settings', value: Icons.settings),
        Option(label: 'More', value: Icons.more_vert),
        Option(label: 'Menu', value: Icons.menu),
      ],
      initial: Icons.settings,
    );

    final ValueNotifier<int> currentIndexNotifier = ValueNotifier<int>(0);

    List<DDSBottomNavItemConfig> generateItems() {
      return [
        DDSBottomNavItemConfig(
          icon: DDSIconData(Icons.home),
          label: 'Home',
          hasBadge: hasBadge,
          badgeColor: badgeColor,
        ),
        DDSBottomNavItemConfig(
          icon: DDSIconData(Icons.search),
          label: 'Search',
          hasBadge: hasBadge,
          badgeColor: badgeColor,
        ),
        DDSBottomNavItemConfig(
          icon: DDSIconData(Icons.person),
          label: 'Profile',
          hasBadge: hasBadge,
          badgeColor: badgeColor,
        ),
        DDSBottomNavItemConfig(
          icon: DDSIconData(Icons.settings),
          label: 'Settings',
          hasBadge: hasBadge,
          badgeColor: badgeColor,
        ),
      ];
    }

    List<ActionButtonConfig>? generateFabActions() {
      if (!showFabActions) return null;

      return [
        ActionButtonConfig(
          icon: DDSIconData(fabAction1Icon),
          onPressed: () => print('Action 1 pressed'),
          iconColor: selectedItemColor,
        ),
        ActionButtonConfig(
          icon: DDSIconData(fabAction2Icon),
          onPressed: () => print('Action 2 pressed'),
          iconColor: selectedItemColor,
        ),
        ActionButtonConfig(
          icon: DDSIconData(fabAction3Icon),
          onPressed: () => print('Action 3 pressed'),
          iconColor: selectedItemColor,
        ),
      ];
    }

    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: SafeArea(
        child: Center(
          child: Container(
            width: MediaQuery.of(context).size.width * 0.9,
            padding: const EdgeInsets.only(bottom: 2.0),
            child: ValueListenableBuilder<int>(
              valueListenable: currentIndexNotifier,
              builder: (context, currentIndex, child) {
                return DDSBottomNavBar(
                  type: bottomNavBarType,
                  currentIndex: currentIndex,
                  onTap: (index) {
                    currentIndexNotifier.value = index;
                    print('Current Index: $index');
                  },
                  items: generateItems(),
                  selectedItemColor: selectedItemColor,
                  unselectedItemColor: unselectedItemColor,
                  backgroundColor: backgroundColor,
                  borderRadius: bottomNavBarType == BottomNavBarType.floating
                      ? BorderRadius.circular(30)
                      : null,
                  height: navBarHeight,
                  shadowColor: shadowColor,
                  fabActions: bottomNavBarType == BottomNavBarType.extended
                      ? generateFabActions()
                      : null,
                );
              },
            ),
          ),
        ),
      ),
    );
  },
);