Tüm örnekler
Flutter Hiking Trail Card with Elevation Profile and Waypoints
A Flutter hiking trail card for outdoor, trail running and cycling apps: a 34-step elevation profile with a ridge line, markers for trailhead, summit and lake, a distance axis, trip stat tiles, a snow advisory strip and a navigation button. Built with wind_kit className strings only.
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'TRAIL DETAIL',
className: 'text-[9px] font-bold tracking-widest text-emerald-600 dark:text-emerald-400'
),
WText(
'Eagle Ridge Loop',
className: 'text-lg font-bold text-gray-900 dark:text-white mt-1'
),
WText(
'Cascade Range, Oregon',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-rose-50 dark:bg-rose-900 px-3 py-1',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-rose-500 dark:bg-rose-400'
),
WText(
'Hard',
className: 'text-[11px] font-bold text-rose-600 dark:text-rose-300 ml-2'
),
],
),
],
),
WDiv(
className: 'relative w-[306px] h-[118px] mt-4',
children: [
WDiv(
className: 'flex flex-row items-end w-[306px] h-[118px]',
children: [
WDiv(
className: 'w-[9px] h-[20px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[22px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[24px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[28px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[32px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[36px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[39px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[40px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[45px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[52px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[57px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[55px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[53px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[57px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[65px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[72px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[78px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[83px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[88px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[91px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[87px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[80px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[71px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[64px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[59px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[56px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[55px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[54px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[48px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[42px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[36px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[31px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[26px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
WDiv(
className: 'w-[9px] h-[23px] bg-emerald-100 dark:bg-emerald-900 border-t-2 border-emerald-500 dark:border-emerald-400'
),
],
),
WDiv(
className: 'absolute left-[0px] top-[90px] w-[14px] h-[14px] rounded-full bg-white dark:bg-gray-900 border-2 border-gray-400 dark:border-gray-500'
),
WDiv(
className: 'absolute left-[168px] top-[19px] w-[14px] h-[14px] rounded-full bg-white dark:bg-gray-900 border-2 border-emerald-600 dark:border-emerald-300'
),
WDiv(
className: 'absolute left-[240px] top-[56px] w-[14px] h-[14px] rounded-full bg-white dark:bg-gray-900 border-2 border-sky-500 dark:border-sky-300'
),
WDiv(
className: 'absolute left-[190px] top-[14px] flex flex-row items-center rounded-lg bg-emerald-600 dark:bg-emerald-500 px-2 py-1',
children: [
WText(
'Eagle Peak',
className: 'text-[10px] font-bold text-white dark:text-white'
),
WText(
'2,140 m',
className: 'text-[10px] font-bold text-emerald-100 dark:text-emerald-100 ml-2'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-[306px] mt-2',
children: [
WText(
'Trailhead',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'6.2 km',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500'
),
WText(
'12.4 km',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'DISTANCE',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'12.4',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'km',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'ASCENT',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'860',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'm',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
WDiv(
className: 'flex flex-col w-[98px] rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 py-2',
children: [
WText(
'MOVING',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WDiv(
className: 'flex flex-row items-center mt-1',
children: [
WText(
'4:15',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'hrs',
className: 'text-[10px] font-semibold text-gray-400 dark:text-gray-500 ml-1'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full rounded-2xl bg-amber-50 dark:bg-amber-900 px-3 py-2 mt-3',
children: [
WIcon(
Icons.warning,
className: 'text-amber-500 dark:text-amber-300 text-base'
),
WText(
'Snow patches above 1,800 m',
className: 'text-[11px] font-semibold text-amber-700 dark:text-amber-200 ml-2'
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-emerald-600 dark:bg-emerald-500 py-3',
child: WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.location_on,
className: 'text-white dark:text-white text-base'
),
WText(
'Start navigation',
className: 'text-sm font-bold text-white dark:text-white ml-2'
),
],
),
),
),
],
)
293 satır
Playground'da aç
Benzer örnekler
-
Flutter Navigation Lights Card with COLREGs Port, Starboard, Masthead and Stern Light Arcs
A Flutter navigation lights card for boating and marine apps: a night panel with a top-down hull ringed by the COLREGs Rule 21 arcs, red port and green starboard sidelights at 112.5 degrees, a 225 degree masthead ring, a 135 degree sternlight and Rule 22 visibility ranges. Built with wind_kit.
-
Flutter Runway Markings Card with Designator, Threshold Stripes and Aiming Point
A Flutter runway markings card for aviation and flight training apps: the approach end of runway 27 drawn to scale, with eight threshold stripes, the designator from a 268 degree heading, a dashed centreline and twin aiming point bars, each called out. Absolute positioning in wind_kit.
-
Flutter Container Ship Bay Plan Card with Colour Coded Port Stacks
A Flutter container ship bay plan card for logistics and terminal apps: a row-by-tier cross-section of Bay 14 with port and starboard row numbers, deck tiers above the hatch cover, a tapered hold, slots coloured by discharge port, plugged reefers and a stowage legend. Built with wind_kit.
