Flutter Frame Profiler Card with Nested Flame Chart Layers
A performance profiler card that renders a real flame chart: nested call frames stacked by depth, a red frame budget line cutting across the stack, and the hot path picked out in amber. Built with Wind className strings, no charting package and no custom painter.
by Anılcan Çakır
7 views
0 stars
1 day ago
Rev 1
main.dart
WDiv(
className: 'flex flex-col w-[340px] p-5 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800',
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-10 h-10 rounded-xl bg-indigo-500 dark:bg-indigo-400',
child: WIcon(
Icons.bolt,
className: 'text-xl text-white dark:text-gray-900'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Frame 1042',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Profile mode, release build',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'rounded-full bg-rose-100 dark:bg-rose-900 px-2 py-1',
child: WText(
'JANK',
className: 'text-[10px] font-bold tracking-wide text-rose-700 dark:text-rose-200'
),
),
],
),
WDiv(
className: 'flex flex-row items-end w-full mt-5',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'24.6 ms',
className: 'text-3xl font-bold text-gray-900 dark:text-white'
),
WText(
'TOTAL FRAME TIME',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'flex flex-col ml-4',
children: [
WDiv(
className: 'flex flex-row items-center',
child: WDiv(
className: 'rounded-md bg-rose-50 dark:bg-rose-900 px-2 py-1',
child: WText(
'+7.9 ms',
className: 'text-xs font-bold text-rose-600 dark:text-rose-200'
),
),
),
WText(
'over budget',
className: 'text-[10px] text-gray-500 dark:text-gray-400 mt-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-5',
children: [
WText(
'FLAME CHART',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'16.7 MS BUDGET',
className: 'text-[9px] font-bold tracking-widest text-rose-500 dark:text-rose-400'
),
],
),
WDiv(
className: 'relative w-[300px] h-[96px] mt-2',
children: [
WDiv(
className: 'flex flex-col w-[300px] h-[96px]',
children: [
WDiv(
className: 'flex flex-row w-[300px] h-[16px]',
children: [
WDiv(
className: 'flex flex-row items-center w-[300px] h-[16px] rounded-sm px-[4px] bg-slate-400 dark:bg-slate-500',
child: WText(
'main()',
className: 'text-[9px] font-semibold text-white dark:text-gray-900'
),
),
],
),
WDiv(
className: 'flex flex-row w-[300px] h-[16px] mt-1',
children: [
WDiv(
className: 'flex flex-row items-center w-[176px] h-[16px] rounded-sm px-[4px] bg-indigo-500 dark:bg-indigo-400',
child: WText(
'Element.rebuild',
className: 'text-[9px] font-semibold text-white dark:text-gray-900'
),
),
WDiv(
className: 'w-[4px] h-[16px]'
),
WDiv(
className: 'flex flex-row items-center justify-end w-[120px] h-[16px] rounded-sm px-[4px] bg-teal-500 dark:bg-teal-400',
child: WText(
'PaintingContext',
className: 'text-[9px] font-semibold text-white dark:text-gray-900'
),
),
],
),
WDiv(
className: 'flex flex-row w-[300px] h-[16px] mt-1',
children: [
WDiv(
className: 'w-[8px] h-[16px]'
),
WDiv(
className: 'flex flex-row items-center w-[132px] h-[16px] rounded-sm px-[4px] bg-indigo-400 dark:bg-indigo-300',
child: WText(
'ProductGrid.build',
className: 'text-[9px] font-semibold text-white dark:text-gray-900'
),
),
WDiv(
className: 'w-[6px] h-[16px]'
),
WDiv(
className: 'w-[30px] h-[16px] rounded-sm bg-indigo-300 dark:bg-indigo-200'
),
WDiv(
className: 'w-[10px] h-[16px]'
),
WDiv(
className: 'flex flex-row items-center justify-end w-[110px] h-[16px] rounded-sm px-[4px] bg-teal-400 dark:bg-teal-300',
child: WText(
'Layer.paint',
className: 'text-[9px] font-semibold text-white dark:text-gray-900'
),
),
],
),
WDiv(
className: 'flex flex-row w-[300px] h-[16px] mt-1',
children: [
WDiv(
className: 'w-[16px] h-[16px]'
),
WDiv(
className: 'flex flex-row items-center w-[106px] h-[16px] rounded-sm px-[4px] bg-amber-500 dark:bg-amber-400',
child: WText(
'ProductTile x24',
className: 'text-[9px] font-semibold text-white dark:text-gray-900'
),
),
WDiv(
className: 'w-[70px] h-[16px]'
),
WDiv(
className: 'flex flex-row items-center justify-end w-[80px] h-[16px] rounded-sm px-[4px] bg-teal-300 dark:bg-teal-200',
child: WText(
'RasterCache',
className: 'text-[9px] font-semibold text-teal-900 dark:text-teal-900'
),
),
],
),
WDiv(
className: 'flex flex-row w-[300px] h-[16px] mt-1',
children: [
WDiv(
className: 'w-[24px] h-[16px]'
),
WDiv(
className: 'flex flex-row items-center w-[72px] h-[16px] rounded-sm px-[4px] bg-amber-400 dark:bg-amber-300',
child: WText(
'Image.decode',
className: 'text-[9px] font-semibold text-amber-900 dark:text-amber-900'
),
),
WDiv(
className: 'w-[104px] h-[16px]'
),
WDiv(
className: 'flex flex-row items-center justify-end w-[52px] h-[16px] rounded-sm px-[4px] bg-teal-200 dark:bg-teal-100',
child: WText(
'Shader',
className: 'text-[9px] font-semibold text-teal-900 dark:text-teal-900'
),
),
],
),
],
),
WDiv(
className: 'absolute left-[204px] top-[0px] w-[2px] h-[96px] bg-rose-500 dark:bg-rose-400'
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-5',
children: [
WDiv(
className: 'flex flex-col items-center w-[92px] py-2 rounded-xl bg-gray-50 dark:bg-gray-800',
children: [
WText(
'9.2 ms',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'BUILD',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500 mt-1'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[92px] py-2 rounded-xl bg-gray-50 dark:bg-gray-800',
children: [
WText(
'15.4 ms',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'RASTER',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500 mt-1'
),
],
),
WDiv(
className: 'flex flex-col items-center w-[92px] py-2 rounded-xl bg-gray-50 dark:bg-gray-800',
children: [
WText(
'318',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'WIDGETS',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500 mt-1'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-full mt-4 p-3 rounded-xl bg-amber-50 dark:bg-amber-900',
children: [
WIcon(
Icons.warning,
className: 'text-base text-amber-600 dark:text-amber-300'
),
WDiv(
className: 'ml-2',
child: WText(
'24 ProductTile rebuilds spill past the budget line',
className: 'text-[11px] font-medium text-amber-800 dark:text-amber-100'
),
),
],
),
WDiv(
className: 'w-full mt-4',
child: WButton(
className: 'flex flex-row items-center justify-center w-full py-3 rounded-xl bg-gray-900 dark:bg-white',
child: WText(
'Open frame in DevTools',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
Stats
- Views
- 7
- Stars
- 0
- Revisions
- 1
- Size
- 10,294 chars
- Created
- Sep 13, 2026