Flutter Quiz Multiple Choice Question Card with Progress

WDiv(
  className: 'max-w-sm w-full mx-auto p-6 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-2',
      children: [
        WText(
          'Question 3 of 10',
          className: 'text-indigo-600 dark:text-indigo-400 text-xs font-bold uppercase'
        ),
        WText(
          '00:24',
          className: 'text-gray-400 dark:text-gray-500 text-xs font-medium'
        ),
      ],
    ),
    WDiv(
      className: 'h-2 w-full rounded-full bg-gray-100 dark:bg-gray-800 mb-5',
      child: WDiv(
        className: 'h-2 w-24 rounded-full bg-indigo-600 dark:bg-indigo-500',
        children: []
      ),
    ),
    WText(
      'Which widget creates a scrollable list of items in Flutter?',
      className: 'text-gray-900 dark:text-white text-lg font-bold mb-5'
    ),
    WDiv(
      className: 'flex flex-row items-center w-full p-3 rounded-2xl border border-gray-200 dark:border-gray-800 mb-3',
      children: [
        WDiv(
          className: 'w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center mr-3',
          child: WText(
            'A',
            className: 'text-gray-500 dark:text-gray-400 text-sm font-bold'
          ),
        ),
        WText(
          'Container',
          className: 'text-gray-700 dark:text-gray-200 text-sm font-medium'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full p-3 rounded-2xl border-2 border-indigo-500 dark:border-indigo-400 bg-indigo-50 dark:bg-indigo-950 mb-3',
      children: [
        WDiv(
          className: 'flex flex-row items-center',
          children: [
            WDiv(
              className: 'w-8 h-8 rounded-full bg-indigo-600 dark:bg-indigo-500 flex flex-row items-center justify-center mr-3',
              child: WText(
                'B',
                className: 'text-white dark:text-white text-sm font-bold'
              ),
            ),
            WText(
              'ListView',
              className: 'text-indigo-700 dark:text-indigo-200 text-sm font-semibold'
            ),
          ],
        ),
        WIcon(
          Icons.check,
          className: 'text-indigo-600 dark:text-indigo-400 text-lg'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full p-3 rounded-2xl border border-gray-200 dark:border-gray-800 mb-3',
      children: [
        WDiv(
          className: 'w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center mr-3',
          child: WText(
            'C',
            className: 'text-gray-500 dark:text-gray-400 text-sm font-bold'
          ),
        ),
        WText(
          'Column',
          className: 'text-gray-700 dark:text-gray-200 text-sm font-medium'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full p-3 rounded-2xl border border-gray-200 dark:border-gray-800 mb-5',
      children: [
        WDiv(
          className: 'w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center mr-3',
          child: WText(
            'D',
            className: 'text-gray-500 dark:text-gray-400 text-sm font-bold'
          ),
        ),
        WText(
          'Stack',
          className: 'text-gray-700 dark:text-gray-200 text-sm font-medium'
        ),
      ],
    ),
    WButton(
      className: 'w-full py-3 rounded-2xl bg-indigo-600 dark:bg-indigo-500 flex flex-row items-center justify-center',
      child: WText(
        'Submit Answer',
        className: 'text-white dark:text-white text-sm font-bold'
      ),
    ),
  ],
)