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 2
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,704 chars
Created
Jun 9, 2026
Revisions