Flutter Video Call Card with Participant Tile Grid
A live meeting panel with a six tile participant grid, an active speaker ring, per person mute and camera state, connection stats, and a round control bar. Pure Wind className layout, no video plugin needed for the design pass.
by Anılcan Çakır
76 views
0 stars
3 weeks ago
Rev 1
main.dart
WDiv(
className: 'max-w-sm w-full rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl p-6',
children: [
WDiv(
className: 'flex flex-row items-center justify-between w-full',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WDiv(
className: 'w-11 h-11 rounded-2xl bg-violet-50 dark:bg-violet-900 flex flex-row items-center justify-center',
child: WIcon(
Icons.camera_alt,
className: 'text-violet-600 dark:text-violet-300 text-xl'
),
),
WDiv(
className: 'flex flex-col ml-3',
children: [
WText(
'Design standup',
className: 'text-base font-bold text-gray-900 dark:text-white'
),
WText(
'Sprint 24 review | 6 joined',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center px-2.5 py-1 rounded-full bg-rose-100 dark:bg-rose-800',
children: [
WDiv(
className: 'w-2 h-2 rounded-full bg-rose-500 dark:bg-rose-300'
),
WText(
'24:18',
className: 'text-xs font-bold text-rose-700 dark:text-rose-100 ml-1.5'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-5',
children: [
WDiv(
className: 'w-[104px] h-[92px] rounded-2xl bg-emerald-50 dark:bg-gray-800 border-2 border-emerald-500 dark:border-emerald-400 flex flex-col items-center justify-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-full bg-emerald-500 dark:bg-emerald-400 flex flex-row items-center justify-center',
child: WText(
'EM',
className: 'text-xs font-bold text-white'
),
),
WText(
'Elena M.',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white mt-1.5'
),
WText(
'Speaking',
className: 'text-[10px] font-medium text-emerald-600 dark:text-emerald-400'
),
],
),
WDiv(
className: 'w-[104px] h-[92px] rounded-2xl bg-gray-50 dark:bg-gray-800 flex flex-col items-center justify-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-full bg-sky-500 dark:bg-sky-400 flex flex-row items-center justify-center',
child: WText(
'DK',
className: 'text-xs font-bold text-white'
),
),
WText(
'Deniz K.',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white mt-1.5'
),
WText(
'Muted',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'w-[104px] h-[92px] rounded-2xl bg-gray-50 dark:bg-gray-800 flex flex-col items-center justify-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-full bg-amber-500 dark:bg-amber-400 flex flex-row items-center justify-center',
child: WText(
'JR',
className: 'text-xs font-bold text-white'
),
),
WText(
'Jonas R.',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white mt-1.5'
),
WText(
'Listening',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-3',
children: [
WDiv(
className: 'w-[104px] h-[92px] rounded-2xl bg-gray-50 dark:bg-gray-800 flex flex-col items-center justify-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-full bg-rose-500 dark:bg-rose-400 flex flex-row items-center justify-center',
child: WText(
'AO',
className: 'text-xs font-bold text-white'
),
),
WText(
'Amara O.',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white mt-1.5'
),
WText(
'Muted',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'w-[104px] h-[92px] rounded-2xl bg-gray-50 dark:bg-gray-800 flex flex-col items-center justify-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-full bg-violet-500 dark:bg-violet-400 flex flex-row items-center justify-center',
child: WText(
'TS',
className: 'text-xs font-bold text-white'
),
),
WText(
'Tomas S.',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white mt-1.5'
),
WText(
'Camera off',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
],
),
WDiv(
className: 'w-[104px] h-[92px] rounded-2xl bg-gray-100 dark:bg-gray-800 flex flex-col items-center justify-center',
children: [
WDiv(
className: 'w-9 h-9 rounded-full bg-gray-200 dark:bg-gray-700 flex flex-row items-center justify-center',
child: WText(
'+3',
className: 'text-xs font-bold text-gray-600 dark:text-gray-200'
),
),
WText(
'3 more',
className: 'text-[11px] font-semibold text-gray-900 dark:text-white mt-1.5'
),
WText(
'In lobby',
className: 'text-[10px] font-medium text-gray-400 dark:text-gray-500'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full rounded-2xl bg-gray-50 dark:bg-gray-800 p-4 mt-5',
children: [
WDiv(
className: 'flex flex-col',
children: [
WText(
'Excellent',
className: 'text-sm font-bold text-emerald-600 dark:text-emerald-400'
),
WText(
'Connection',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'42 ms',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'Latency',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
WDiv(
className: 'flex flex-col',
children: [
WText(
'1080p',
className: 'text-sm font-bold text-gray-900 dark:text-white'
),
WText(
'Send quality',
className: 'text-xs text-gray-500 dark:text-gray-400'
),
],
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-5',
children: [
WButton(
className: 'w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
child: WIcon(
Icons.volume_up,
className: 'text-gray-700 dark:text-gray-200 text-xl'
),
),
WButton(
className: 'w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
child: WIcon(
Icons.camera_alt,
className: 'text-gray-700 dark:text-gray-200 text-xl'
),
),
WButton(
className: 'w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
child: WIcon(
Icons.person,
className: 'text-gray-700 dark:text-gray-200 text-xl'
),
),
WButton(
className: 'w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
child: WIcon(
Icons.more_horiz,
className: 'text-gray-700 dark:text-gray-200 text-xl'
),
),
WButton(
className: 'w-[92px] h-12 rounded-full bg-rose-600 dark:bg-rose-500 flex flex-row items-center justify-center',
child: WText(
'Leave',
className: 'text-white font-semibold text-sm'
),
),
],
),
WDiv(
className: 'flex flex-row items-center justify-between w-full mt-4',
children: [
WDiv(
className: 'flex flex-row items-center',
children: [
WIcon(
Icons.schedule,
className: 'text-gray-400 dark:text-gray-500 text-sm'
),
WText(
'Recording saves to the team drive',
className: 'text-xs text-gray-500 dark:text-gray-400 ml-1.5'
),
],
),
WIcon(
Icons.chevron_right,
className: 'text-gray-300 dark:text-gray-600 text-base'
),
],
),
],
)
Stats
- Views
- 76
- Stars
- 0
- Revisions
- 1
- Size
- 9,818 chars
- Created
- Jul 30, 2026