Skip to content
Türkçe
All snippets

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.

  • WDiv
  • WText
preview
8tn3yfxl.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'
          )
        ),
      ],
    ),
  ],
)
49 lines Open in the playground

More like this

  • Flutter Progress Stepper Wizard with Plan Selection

    A multi-step wizard header with a connected step rail (completed, active, and upcoming states) over a plan selection step and a continue button, all composed from Wind utility classes.

    • WDiv
    • WIcon
    • WText
    • WButton

  • Flutter Onboarding Slide with Feature Highlight and Page Dots

    A polished onboarding slide built with Wind utility classes: a gradient feature icon, a bold headline, supporting copy, page indicator dots, and a full-width call to action. Dark mode pairs are included on every color token.

    • WDiv
    • WIcon
    • WText
    • WButton

  • Flutter Component Search Card with Live Suggestions

    A component search card built on the real WInput widget, with a focused search field and a categorized suggestion list. Demonstrates Wind form inputs with icon tiles and dark-mode pairs.

    • WDiv
    • WIcon
    • WText
    • WInput
    • WButton