Flutter Course Lesson Progress Card
A vibrant gradient e-learning card with a category pill, course title, a lesson progress bar, and XP, time-left, and completed chips, capped with a continue-learning call to action. Built with Tailwind-style className utilities in Flutter.
WDiv(
className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-gradient-to-br from-violet-600 to-indigo-700 shadow-xl dark:from-violet-700 dark:to-indigo-800',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-white/20 dark:bg-white/20',
children: [
WIcon(
Icons.code,
className: 'text-white text-sm'
),
WText(
'DESIGN SYSTEMS',
className: 'text-xs font-bold tracking-wide text-white'
),
],
),
WText(
'44%',
className: 'text-sm font-bold text-white'
),
],
),
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'Foundations of UI Design',
className: 'text-2xl font-extrabold text-white'
),
WText(
'Lesson 4 of 9 · Color and contrast systems',
className: 'text-xs text-indigo-200 dark:text-indigo-200'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full h-2 rounded-full bg-white/20 dark:bg-white/20',
child: WDiv(
className: 'h-2 w-[148px] rounded-full bg-white dark:bg-white',
child: WSpacer(
className: 'w-[148px] h-2'
),
),
),
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WIcon(
Icons.star,
className: 'text-amber-300 text-base dark:text-amber-300'
),
WText(
'320 XP',
className: 'text-xs font-semibold text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WIcon(
Icons.schedule,
className: 'text-indigo-200 text-base dark:text-indigo-200'
),
WText(
'2h left',
className: 'text-xs font-semibold text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1',
children: [
WIcon(
Icons.check,
className: 'text-emerald-300 text-base dark:text-emerald-300'
),
WText(
'3 done',
className: 'text-xs font-semibold text-white'
),
],
),
],
),
WButton(
className: 'w-full rounded-2xl px-5 py-3 bg-white hover:bg-indigo-50 shadow-lg dark:bg-white dark:hover:bg-indigo-50',
child: WDiv(
className: 'flex flex-row items-center justify-center gap-2',
children: [
WText(
'Continue learning',
className: 'text-base font-bold text-indigo-700 dark:text-indigo-700'
),
WIcon(
Icons.arrow_forward,
className: 'text-indigo-700 text-lg dark:text-indigo-700'
),
],
),
),
],
)
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.
