Flutter Job Listing Card with Tags and Salary
A job listing card with a gradient company logo, role title, location row, colored employment tags, and a salary range beside an Apply call to action. Built with Wind utility classes and full dark-mode pairs.
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl p-6 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',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-12 h-12 rounded-2xl bg-gradient-to-br from-sky-500 to-indigo-600 dark:from-sky-600 dark:to-indigo-700 flex flex-row items-center justify-center',
children: [
WText(
'FS',
className: 'text-base font-bold text-white dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Acme',
className: 'text-sm font-semibold text-gray-900 dark:text-white'
),
WText(
'Posted 2 days ago',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'w-9 h-9 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
children: [
WIcon(
Icons.favorite_outline,
className: 'text-base text-gray-500 dark:text-gray-400'
),
],
),
],
),
WText(
'Senior Flutter Engineer',
className: 'mt-5 text-xl font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WIcon(
Icons.location_on,
className: 'text-sm text-gray-400 dark:text-gray-500'
),
WText(
'Remote · Worldwide',
className: 'ml-1 text-sm text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center mt-4',
children: [
WDiv(
className: 'flex flex-row items-center px-3 py-1 rounded-full bg-emerald-50 dark:bg-emerald-950',
children: [
WText(
'Remote',
className: 'text-xs font-semibold text-emerald-600 dark:text-emerald-400'
),
],
),
WDiv(
className: 'flex flex-row items-center ml-2 px-3 py-1 rounded-full bg-indigo-50 dark:bg-indigo-950',
children: [
WText(
'Full-time',
className: 'text-xs font-semibold text-indigo-600 dark:text-indigo-400'
),
],
),
WDiv(
className: 'flex flex-row items-center ml-2 px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-950',
children: [
WText(
'Senior',
className: 'text-xs font-semibold text-amber-600 dark:text-amber-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-end justify-between w-full mt-6',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Salary',
className: 'text-xs text-gray-400 dark:text-gray-500'
),
WText(
'$120k - $160k',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-row items-center px-5 py-2 rounded-full bg-indigo-600 dark:bg-indigo-500',
children: [
WText(
'Apply',
className: 'text-sm font-semibold text-white dark:text-white'
),
WIcon(
Icons.arrow_forward,
className: 'ml-1 text-sm text-white dark:text-white'
),
],
),
],
),
],
)
More like this
-
Flutter SLA Scorecard Card with Bullet Chart Target Markers
A Flutter SLA scorecard card for support desk dashboards: bullet charts with qualitative bands, a thick actual-value bar and a vertical target tick, so a missed target shows at a glance instead of hiding in a percentage. Built with wind_kit utility classes, dark mode pairs, no chart package.
-
Flutter Audience Overlap Card with Three Circle Venn Segments
A Flutter audience overlap card for marketing and growth dashboards: three translucent circles form a real Venn diagram, so shared regions darken by themselves and each lobe shows its count, with a segment legend, reach and overlap tiles and a suppression action. wind_kit only, no chart library.
-
Flutter A/B Test Results Card with Mirrored Variant Bars
An experiment readout where control and variant grow away from a shared centre axis, one metric per row, so which side wins is obvious before you read a single number. Ends with the projected revenue lift and a ship decision.
