Flutter Hiking Trail Card with Elevation Profile and Waypoints
An outdoor trail detail card built entirely from Wind className strings. A 34 step elevation silhouette carries a ridge line along its crest, ring markers call out the trailhead, the summit and the lake, and a distance axis runs underneath. Below it sit three trip stat tiles, a snow advisory strip and a full width navigation button. Ready to drop into a hiking, trail running or cycling app.
by Anılcan Çakır
11 views
0 stars
1 day ago
Rev 1
main.dart
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'
),
],
),
),
),
],
)
Stats
- Views
- 11
- Stars
- 0
- Revisions
- 1
- Size
- 12,041 chars
- Created
- Aug 23, 2026