Flutter Language Learning Flashcard
A clean vocabulary flashcard with a language badge, XP reward, the target word with its phonetic spelling, a translation row with an audio control, and review actions. An e-learning pattern 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-white shadow-xl dark:bg-gray-900',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center gap-2 rounded-full px-3 py-1 bg-rose-50 dark:bg-rose-950',
children: [
WDiv(
className: 'flex items-center justify-center w-6 h-6 rounded-full bg-rose-500 dark:bg-rose-500',
child: WText(
'ES',
className: 'text-xs font-bold text-white'
),
),
WText(
'Spanish',
className: 'text-xs font-semibold text-rose-700 dark:text-rose-300'
),
],
),
WDiv(
className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-amber-50 dark:bg-amber-950',
children: [
WIcon(
Icons.bolt,
className: 'text-amber-500 text-sm dark:text-amber-400'
),
WText(
'+10 XP',
className: 'text-xs font-bold text-amber-700 dark:text-amber-300'
),
],
),
],
),
WDiv(
className: 'flex flex-col gap-1',
children: [
WText(
'Mariposa',
className: 'text-4xl font-extrabold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center gap-2',
children: [
WText(
'/ma.ri.po.sa/',
className: 'text-sm font-medium text-gray-400 dark:text-gray-500'
),
WText(
'noun',
className: 'text-xs font-semibold text-indigo-500 dark:text-indigo-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl p-3 bg-gray-50 dark:bg-gray-800',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Butterfly',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'English translation',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex items-center justify-center w-10 h-10 rounded-full bg-indigo-500 dark:bg-indigo-500',
child: WIcon(
Icons.volume_up,
className: 'text-white text-lg'
),
),
],
),
WDiv(
className: 'flex flex-row items-center gap-3 w-full',
children: [
WDiv(
className: 'flex flex-row items-center justify-center gap-2 rounded-2xl px-5 py-3 w-[150px] bg-gray-100 dark:bg-gray-800',
children: [
WIcon(
Icons.schedule,
className: 'text-gray-600 text-base dark:text-gray-300'
),
WText(
'Review',
className: 'text-sm font-bold text-gray-700 dark:text-gray-200'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-center gap-2 rounded-2xl px-5 py-3 w-[150px] bg-indigo-500 dark:bg-indigo-500',
children: [
WIcon(
Icons.check,
className: 'text-white text-base'
),
WText(
'Got it',
className: 'text-sm font-bold text-white'
),
],
),
],
),
],
)
Benzer örnekler
-
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.
