Flutter Trading Chart Card with Candlestick Session Range
An intraday trading card that pairs a 14 bar candlestick chart with its volume histogram, a price axis, and the session open, high, low, and volume figures. Every wick and body is a plain Wind div, so the whole chart renders without a charting library.
by Anılcan Çakır
37 views
0 stars
1 week ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-full max-w-sm rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 shadow-lg',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'flex flex-row items-center justify-center w-9 h-9 rounded-xl bg-gray-900 dark:bg-white',
child: WText(
'AC',
className: 'text-[11px] font-bold text-white dark:text-gray-900'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'ACME',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Acme Robotics Inc.',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-col items-end',
children: [
WText(
'184.10',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WDiv(
className: 'flex flex-row items-center rounded-full bg-emerald-50 dark:bg-emerald-500 px-2 py-1 mt-1',
children: [
WIcon(
Icons.trending_up,
className: 'text-[10px] text-emerald-600 dark:text-white'
),
WDiv(
className: 'ml-1',
child: WText(
'+8.04%',
className: 'text-[10px] font-bold text-emerald-600 dark:text-white'
),
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-start w-full mt-5',
children: [
WDiv(
className: 'flex flex-col w-[30px] h-[120px]',
children: [
WDiv(
className: 'h-[40px]',
child: WText(
'186',
className: 'text-[9px] text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'h-[40px]',
child: WText(
'180',
className: 'text-[9px] text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'h-[40px]',
child: WText(
'174',
className: 'text-[9px] text-gray-400 dark:text-gray-500'
)
),
],
),
WDiv(
className: 'flex flex-row items-start h-[120px] gap-1',
children: [
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[93px]'
),
WDiv(
className: 'w-[2px] h-[3px] bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[10px] h-[8px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[4px] bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[84px]'
),
WDiv(
className: 'w-[2px] h-[3px] bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[10px] h-[9px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[4px] bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[85px]'
),
WDiv(
className: 'w-[2px] h-[2px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[10px] h-[15px] rounded-sm bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[2px] h-[3px] bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[97px]'
),
WDiv(
className: 'w-[2px] h-[5px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[10px] h-[9px] rounded-sm bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[2px] h-[3px] bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[88px]'
),
WDiv(
className: 'w-[2px] h-[3px] bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[10px] h-[20px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[2px] bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[69px]'
),
WDiv(
className: 'w-[2px] h-[4px] bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[10px] h-[18px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[2px] bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[65px]'
),
WDiv(
className: 'w-[2px] h-[8px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[10px] h-[8px] rounded-sm bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[2px] h-[3px] bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[76px]'
),
WDiv(
className: 'w-[2px] h-[5px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[10px] h-[5px] rounded-sm bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[2px] h-[4px] bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[51px]'
),
WDiv(
className: 'w-[2px] h-[4px] bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[10px] h-[31px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[1px] bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[46px]'
),
WDiv(
className: 'w-[2px] h-[9px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[10px] h-[6px] rounded-sm bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[2px] h-[3px] bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[56px]'
),
WDiv(
className: 'w-[2px] h-[5px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[10px] h-[10px] rounded-sm bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'w-[2px] h-[4px] bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[39px]'
),
WDiv(
className: 'w-[2px] h-[3px] bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[10px] h-[29px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[2px] bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[24px]'
),
WDiv(
className: 'w-[2px] h-[3px] bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[10px] h-[15px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[3px] bg-emerald-500 dark:bg-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[18px]',
children: [
WDiv(
className: 'w-[18px] h-[9px]'
),
WDiv(
className: 'w-[2px] h-[4px] bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[10px] h-[14px] rounded-sm bg-emerald-500 dark:bg-emerald-400'
),
WDiv(
className: 'w-[2px] h-[5px] bg-emerald-500 dark:bg-emerald-400'
),
],
),
],
),
],
),
WDiv(
className: 'flex flex-row items-end w-full h-[32px] gap-1 mt-2 pl-[30px]',
children: [
WDiv(
className: 'w-[18px] h-[13px] rounded-t-sm bg-emerald-200 dark:bg-emerald-500'
),
WDiv(
className: 'w-[18px] h-[15px] rounded-t-sm bg-emerald-200 dark:bg-emerald-500'
),
WDiv(
className: 'w-[18px] h-[17px] rounded-t-sm bg-rose-200 dark:bg-rose-500'
),
WDiv(
className: 'w-[18px] h-[20px] rounded-t-sm bg-rose-200 dark:bg-rose-500'
),
WDiv(
className: 'w-[18px] h-[16px] rounded-t-sm bg-emerald-200 dark:bg-emerald-500'
),
WDiv(
className: 'w-[18px] h-[24px] rounded-t-sm bg-emerald-200 dark:bg-emerald-500'
),
WDiv(
className: 'w-[18px] h-[18px] rounded-t-sm bg-rose-200 dark:bg-rose-500'
),
WDiv(
className: 'w-[18px] h-[13px] rounded-t-sm bg-rose-200 dark:bg-rose-500'
),
WDiv(
className: 'w-[18px] h-[26px] rounded-t-sm bg-emerald-200 dark:bg-emerald-500'
),
WDiv(
className: 'w-[18px] h-[22px] rounded-t-sm bg-rose-200 dark:bg-rose-500'
),
WDiv(
className: 'w-[18px] h-[16px] rounded-t-sm bg-rose-200 dark:bg-rose-500'
),
WDiv(
className: 'w-[18px] h-[28px] rounded-t-sm bg-emerald-200 dark:bg-emerald-500'
),
WDiv(
className: 'w-[18px] h-[30px] rounded-t-sm bg-emerald-200 dark:bg-emerald-500'
),
WDiv(
className: 'w-[18px] h-[32px] rounded-t-sm bg-emerald-200 dark:bg-emerald-500'
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-2 pl-[30px]',
children: [
WDiv(
className: 'w-[100px]',
child: WText(
'09:30',
className: 'text-[9px] text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'w-[100px]',
child: WText(
'12:45',
className: 'text-[9px] text-gray-400 dark:text-gray-500'
)
),
WDiv(
className: 'w-[100px]',
child: WText(
'16:00',
className: 'text-[9px] text-gray-400 dark:text-gray-500'
)
),
],
),
WDiv(
className: 'w-full border-t border-gray-200 dark:border-gray-700 mt-4'
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-3',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'OPEN',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'170.40',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'HIGH',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'184.60',
className: 'text-xs font-bold text-emerald-600 dark:text-emerald-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'LOW',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'168.90',
className: 'text-xs font-bold text-rose-600 dark:text-rose-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'VOL',
className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
),
WText(
'24.6M',
className: 'text-xs font-bold text-gray-900 dark:text-white'
),
],
),
],
),
WDiv(
className: 'w-full mt-5',
child: WButton(
className: 'w-full rounded-xl bg-gray-900 dark:bg-white py-3 flex flex-row items-center justify-center',
child: WText(
'Place order',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
Stats
- Views
- 37
- Stars
- 0
- Revisions
- 1
- Size
- 15,828 chars
- Created
- Aug 12, 2026