Flutter Filter Chips Row with Selected State

A wrapping row of filter chips with a selected state, built with Wind UI utility classes. A category and tag selector pattern with full dark mode support.

Anılcan Çakır by Anılcan Çakır 23 views 0 stars 2 weeks ago Rev 1
Open in Playground Fork
Flutter Filter Chips Row with Selected State preview
main.dart 
WDiv(
  className: 'mx-auto max-w-md flex flex-col gap-4 rounded-2xl border p-6 bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-800',
  children: [
    WText('Filter by category', className: 'text-sm font-semibold text-gray-900 dark:text-white'),
    WDiv(
      className: 'wrap gap-2',
      children: [
        WDiv(className: 'rounded-full px-4 py-1.5 bg-indigo-600 dark:bg-indigo-500', child: WText('All', className: 'text-sm font-medium text-white')),
        WDiv(className: 'rounded-full px-4 py-1.5 border bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700', child: WText('Design', className: 'text-sm font-medium text-gray-700 dark:text-gray-300')),
        WDiv(className: 'rounded-full px-4 py-1.5 border bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700', child: WText('Development', className: 'text-sm font-medium text-gray-700 dark:text-gray-300')),
        WDiv(className: 'rounded-full px-4 py-1.5 border bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700', child: WText('Marketing', className: 'text-sm font-medium text-gray-700 dark:text-gray-300')),
        WDiv(className: 'rounded-full px-4 py-1.5 border bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700', child: WText('Finance', className: 'text-sm font-medium text-gray-700 dark:text-gray-300')),
      ],
    ),
  ],
)
Stats
Views
23
Stars
0
Revisions
2
Size
1,356 chars
Created
Jun 9, 2026
Revisions