Flutter Bottom Navigation Bar UI

WDiv(
  className: 'mx-auto max-w-sm flex flex-row items-center justify-between rounded-2xl border px-6 py-3 bg-white border-gray-200 shadow-xl dark:bg-gray-900 dark:border-gray-800',
  children: [
    WDiv(
      className: 'flex flex-col items-center gap-1',
      children: [
        WIcon(
          Icons.home,
          className: 'text-indigo-600 text-2xl dark:text-indigo-400'
        ),
        WText(
          'Home',
          className: 'text-xs font-semibold text-indigo-600 dark:text-indigo-400'
        )
      ]
    ),
    WDiv(
      className: 'flex flex-col items-center gap-1',
      children: [
        WIcon(
          Icons.search,
          className: 'text-gray-400 text-2xl dark:text-gray-500'
        ),
        WText(
          'Search',
          className: 'text-xs font-medium text-gray-400 dark:text-gray-500'
        )
      ]
    ),
    WDiv(
      className: 'flex flex-col items-center gap-1',
      children: [
        WIcon(
          Icons.add_circle,
          className: 'text-gray-400 text-2xl dark:text-gray-500'
        ),
        WText(
          'Create',
          className: 'text-xs font-medium text-gray-400 dark:text-gray-500'
        )
      ]
    ),
    WDiv(
      className: 'flex flex-col items-center gap-1',
      children: [
        WIcon(
          Icons.notifications,
          className: 'text-gray-400 text-2xl dark:text-gray-500'
        ),
        WText(
          'Alerts',
          className: 'text-xs font-medium text-gray-400 dark:text-gray-500'
        )
      ]
    ),
    WDiv(
      className: 'flex flex-col items-center gap-1',
      children: [
        WIcon(
          Icons.person,
          className: 'text-gray-400 text-2xl dark:text-gray-500'
        ),
        WText(
          'Profile',
          className: 'text-xs font-medium text-gray-400 dark:text-gray-500'
        )
      ]
    ),
  ],
)