Flutter Code Minimap Card with Viewport Window and Problem Markers
An editor file overview rendered entirely from Wind utility classes: a syntax tinted minimap of the whole file, a translucent viewport window showing where you are scrolled, and an overview ruler ticking off every error and warning below the fold.
by Anılcan Çakır
9 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-violet-500 dark:bg-violet-400',
child: WIcon(
Icons.code,
className: 'text-xl text-white dark:text-gray-900'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'product_grid.dart',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'lib/src/widgets, 412 lines',
className: 'text-[11px] text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'rounded-full bg-amber-100 dark:bg-amber-900 px-2 py-1',
child: WText(
'3 ISSUES',
className: 'text-[10px] font-bold tracking-wide text-amber-700 dark:text-amber-200'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-5',
children: [
WText(
'FILE MINIMAP',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500'
),
WText(
'LINES 118 TO 164',
className: 'text-[9px] font-bold tracking-widest text-indigo-500 dark:text-indigo-400'
),
],
),
WDiv(
className: 'flex flex-row items-start w-full mt-2',
children: [
WDiv(
className: 'relative w-[112px] h-[119px]',
children: [
WDiv(
className: 'flex flex-col w-[96px] h-[119px]',
children: [
WDiv(
className: 'w-[58px] h-[3px] rounded-[1px] bg-indigo-300 dark:bg-indigo-400'
),
WDiv(
className: 'w-[50px] h-[3px] rounded-[1px] mt-[1px] bg-indigo-300 dark:bg-indigo-400'
),
WDiv(
className: 'w-[62px] h-[3px] rounded-[1px] mt-[1px] bg-indigo-300 dark:bg-indigo-400'
),
WDiv(
className: 'w-[96px] h-[3px] mt-[1px]'
),
WDiv(
className: 'w-[72px] h-[3px] rounded-[1px] mt-[1px] bg-emerald-400 dark:bg-emerald-500'
),
WDiv(
className: 'w-[44px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[60px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[66px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-violet-300 dark:bg-violet-400'
),
WDiv(
className: 'w-[52px] h-[3px] rounded-[1px] ml-[16px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[38px] h-[3px] rounded-[1px] ml-[16px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[58px] h-[3px] rounded-[1px] ml-[16px] mt-[1px] bg-amber-300 dark:bg-amber-400'
),
WDiv(
className: 'w-[46px] h-[3px] rounded-[1px] ml-[24px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[54px] h-[3px] rounded-[1px] ml-[24px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[30px] h-[3px] rounded-[1px] ml-[24px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[62px] h-[3px] rounded-[1px] ml-[16px] mt-[1px] bg-rose-300 dark:bg-rose-400'
),
WDiv(
className: 'w-[40px] h-[3px] rounded-[1px] ml-[16px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[56px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[96px] h-[3px] mt-[1px]'
),
WDiv(
className: 'w-[68px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-violet-300 dark:bg-violet-400'
),
WDiv(
className: 'w-[50px] h-[3px] rounded-[1px] ml-[16px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[60px] h-[3px] rounded-[1px] ml-[16px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[42px] h-[3px] rounded-[1px] ml-[24px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[56px] h-[3px] rounded-[1px] ml-[24px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[34px] h-[3px] rounded-[1px] ml-[16px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[48px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-amber-300 dark:bg-amber-400'
),
WDiv(
className: 'w-[52px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[96px] h-[3px] mt-[1px]'
),
WDiv(
className: 'w-[64px] h-[3px] rounded-[1px] mt-[1px] bg-emerald-400 dark:bg-emerald-500'
),
WDiv(
className: 'w-[44px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
WDiv(
className: 'w-[58px] h-[3px] rounded-[1px] ml-[8px] mt-[1px] bg-slate-300 dark:bg-slate-600'
),
],
),
WDiv(
className: 'absolute left-[0px] top-[36px] w-[96px] h-[44px] rounded-sm border-2 border-indigo-500 dark:border-indigo-400 bg-indigo-500/10 dark:bg-indigo-400/10'
),
WDiv(
className: 'absolute left-[100px] top-[40px] w-[12px] h-[4px] rounded-[1px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'absolute left-[100px] top-[56px] w-[12px] h-[4px] rounded-[1px] bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'absolute left-[100px] top-[96px] w-[12px] h-[4px] rounded-[1px] bg-amber-500 dark:bg-amber-400'
),
],
),
WDiv(
className: 'flex flex-col w-[172px] ml-4',
children: [
WDiv(
className: 'flex flex-row items-center w-[172px]',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Undefined name gridKey',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white'
),
WText(
'line 142',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-[172px] mt-3',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-rose-500 dark:bg-rose-400'
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Missing required child',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white'
),
WText(
'line 156',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center w-[172px] mt-3',
children: [
WDiv(
className: 'w-[8px] h-[8px] rounded-full bg-amber-500 dark:bg-amber-400'
),
WDiv(
className: 'flex flex-col ml-2',
children: [
WText(
'Unused import dart:async',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white'
),
WText(
'line 246',
className: 'text-[10px] text-gray-400 dark:text-gray-500'
),
],
),
],
),
],
),
],
),
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(
'412',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'LINES',
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(
'14',
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-col items-center w-[92px] py-2 rounded-xl bg-gray-50 dark:bg-gray-800',
children: [
WText(
'86%',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'COVERED',
className: 'text-[9px] font-bold tracking-widest text-gray-400 dark:text-gray-500 mt-1'
),
],
),
],
),
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(
'Jump to first problem',
className: 'text-sm font-bold text-white dark:text-gray-900'
),
),
),
],
)
Stats
- Views
- 9
- Stars
- 0
- Revisions
- 1
- Size
- 11,438 chars
- Created
- Sep 13, 2026