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'
    ),
    WButton(
      className: 'w-full p-3 rounded-2xl border border-gray-200 dark:border-gray-800 mb-3',
      child: WDiv(
        className: 'flex flex-row items-center',
        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'
          ),
        ],
      ),
    ),
    WButton(
      className: 'w-full p-3 rounded-2xl border-2 border-indigo-500 dark:border-indigo-400 bg-indigo-50 dark:bg-indigo-950 mb-3',
      child: WDiv(
        className: 'flex flex-row items-center justify-between w-full',
        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'
          ),
        ],
      ),
    ),
    WButton(
      className: 'w-full p-3 rounded-2xl border border-gray-200 dark:border-gray-800 mb-3',
      child: WDiv(
        className: 'flex flex-row items-center',
        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'
          ),
        ],
      ),
    ),
    WButton(
      className: 'w-full p-3 rounded-2xl border border-gray-200 dark:border-gray-800 mb-5',
      child: WDiv(
        className: 'flex flex-row items-center',
        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'
      ),
    ),
  ],
)