Flutter Quiz Multiple Choice Question Card with Progress
An interactive quiz question card with a progress bar, lettered multiple-choice options, a highlighted selected answer, and a submit button. Styled entirely with Tailwind-style Wind classes and dark-mode support.
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'
),
),
],
)
More like this
-
Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom
A Flutter electromagnetic spectrum card for science and physics education apps: radio, microwave, infrared, visible, UV, X-ray and gamma bands on a log wavelength axis from 10 m to 0.1 pm with NASA band edges, and a connector zooming the visible slice into a 700 to 400 nm strip. Built with wind_kit.
-
Flutter Seven Segment Display Card with Lit LED Digits and Register Byte Decoder
A seven segment LED card for embedded, IoT and maker apps: a four digit red display reading 12.45 with unlit segments still glowing faintly, an enlarged digit with segments A to G and the decimal point labelled, its MAX7219 no-decode register byte 0xED in hex and binary, and a DP to G bit strip from D7 to D0.
-
Flutter Pascal Triangle Card with Odd Entry Pattern and Row Sums
A Flutter Pascal's triangle card for maths and tutoring apps: rows 0 to 7 as binomial coefficient tiles, odd entries shaded so the Sierpinski pattern shows, and a row sum gutter doubling from 1 to 128. Counts 36 entries, 27 odd, 255 total. Centred wind_kit rows, one node per number.
