Flutter Liquid Glass Tab Bar with Floating Navigation

WDiv(
  className: '''
    relative w-[420px] h-[600px] overflow-hidden rounded-[44px]
    bg-gradient-to-br from-indigo-500 via-fuchsia-500 to-rose-500
    dark:from-indigo-600 dark:via-fuchsia-600 dark:to-rose-600
  ''',
  children: [
    WDiv(
      className: 'absolute -top-16 -left-12 w-56 h-56 rounded-full bg-sky-300/40 dark:bg-sky-300/30',
    ),
    WDiv(
      className: 'absolute top-40 -right-16 w-64 h-64 rounded-full bg-amber-300/40 dark:bg-amber-300/30',
    ),
    WDiv(
      className: 'absolute -bottom-20 left-10 w-72 h-72 rounded-full bg-violet-400/40 dark:bg-violet-400/30',
    ),
    WDiv(
      className: 'absolute inset-0 flex flex-col justify-between p-6',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between',
          children: [
            WDiv(
              className: 'flex flex-col gap-1',
              children: [
                WText(
                  'Good morning',
                  className: 'text-sm font-medium text-white/80 dark:text-white/80',
                ),
                WText(
                  'Anıl',
                  className: 'text-3xl font-bold text-white dark:text-white',
                ),
              ],
            ),
            WDiv(
              className: '''
                w-12 h-12 rounded-full
                border border-white/40 dark:border-white/30
                bg-white/20 dark:bg-white/15
                flex flex-row items-center justify-center
                shadow-lg shadow-black/20 dark:shadow-black/30
              ''',
              child: WIcon(
                Icons.notifications,
                className: 'text-xl text-white dark:text-white',
              ),
            ),
          ],
        ),
        WDiv(
          className: '''
            flex flex-row items-center gap-4 p-5 rounded-3xl
            border border-white/30 dark:border-white/20
            bg-white/15 dark:bg-white/10
            shadow-2xl shadow-black/30 dark:shadow-black/40
          ''',
          children: [
            WDiv(
              className: '''
                w-14 h-14 rounded-2xl
                bg-gradient-to-br from-white/40 to-white/10
                dark:from-white/30 dark:to-white/5
                border border-white/30 dark:border-white/20
                flex flex-row items-center justify-center
              ''',
              child: WIcon(
                Icons.play_arrow,
                className: 'text-2xl text-white dark:text-white',
              ),
            ),
            WDiv(
              className: 'flex flex-col gap-1',
              children: [
                WText(
                  'Up next',
                  className: 'text-xs font-medium uppercase tracking-widest text-white/70 dark:text-white/70',
                ),
                WText(
                  'Design review at 11:00',
                  className: 'text-base font-semibold text-white dark:text-white',
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: '''
            flex flex-row items-center justify-center gap-1
            rounded-full px-3 py-3
            border border-white/40 dark:border-white/25
            bg-white/15 dark:bg-white/10
            shadow-2xl shadow-black/30 dark:shadow-black/50
          ''',
          children: [
            WDiv(
              className: '''
                flex flex-row items-center gap-2 rounded-full px-5 py-3
                bg-white/30 dark:bg-white/20
                border border-white/30 dark:border-white/20
              ''',
              children: [
                WIcon(
                  Icons.home,
                  className: 'text-xl text-white dark:text-white',
                ),
                WText(
                  'Home',
                  className: 'text-sm font-semibold text-white dark:text-white',
                ),
              ],
            ),
            WDiv(
              className: 'rounded-full p-3',
              child: WIcon(
                Icons.search,
                className: 'text-xl text-white/80 dark:text-white/80',
              ),
            ),
            WDiv(
              className: 'rounded-full p-3',
              child: WIcon(
                Icons.add_circle,
                className: 'text-xl text-white/80 dark:text-white/80',
              ),
            ),
            WDiv(
              className: 'rounded-full p-3',
              child: WIcon(
                Icons.favorite,
                className: 'text-xl text-white/80 dark:text-white/80',
              ),
            ),
            WDiv(
              className: 'rounded-full p-3',
              child: WIcon(
                Icons.person,
                className: 'text-xl text-white/80 dark:text-white/80',
              ),
            ),
          ],
        ),
      ],
    ),
  ],
)