Flutter FAQ Accordion Card with Expandable Answers

A frequently asked questions accordion: the first item is expanded with its answer and a down chevron, while the rest stay collapsed with a forward chevron. A clean support and help-center pattern built with Wind utility classes and dark-mode pairing.

Anılcan Çakır by Anılcan Çakır 6 views 0 stars 3 days ago Rev 1
Flutter FAQ Accordion Card with Expandable Answers preview
main.dart
WDiv(
  className: 'flex flex-col gap-3 w-full max-w-sm p-6 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
  children: [
    WDiv(
      className: 'flex flex-col gap-1',
      children: [
        WText(
          'Frequently asked questions',
          className: 'text-xl font-bold text-gray-900 dark:text-white'
        ),
        WText(
          'Everything you need to know before you start.',
          className: 'text-sm text-gray-500 dark:text-gray-400'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col gap-2 w-full p-4 rounded-2xl border border-indigo-200 dark:border-indigo-500/30 bg-indigo-50 dark:bg-indigo-500/10',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WText(
              'Is there a free plan?',
              className: 'text-sm font-semibold text-gray-900 dark:text-white'
            ),
            WIcon(
              Icons.expand_more,
              className: 'text-lg text-indigo-600 dark:text-indigo-400'
            ),
          ],
        ),
        WText(
          'Yes. The free plan includes unlimited public projects and core components, with no time limit. Upgrade only when you need private projects or team seats.',
          className: 'text-sm leading-relaxed text-gray-600 dark:text-gray-300',
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full p-4 rounded-2xl border border-gray-200 dark:border-gray-700',
      children: [
        WText(
          'Can I cancel anytime?',
          className: 'text-sm font-semibold text-gray-700 dark:text-gray-200'
        ),
        WIcon(
          Icons.chevron_right,
          className: 'text-lg text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full p-4 rounded-2xl border border-gray-200 dark:border-gray-700',
      children: [
        WText(
          'Do you offer student discounts?',
          className: 'text-sm font-semibold text-gray-700 dark:text-gray-200'
        ),
        WIcon(
          Icons.chevron_right,
          className: 'text-lg text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full p-4 rounded-2xl border border-gray-200 dark:border-gray-700',
      children: [
        WText(
          'Which platforms are supported?',
          className: 'text-sm font-semibold text-gray-700 dark:text-gray-200'
        ),
        WIcon(
          Icons.chevron_right,
          className: 'text-lg text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
  ],
)
Stats
Views
6
Stars
0
Revisions
1
Size
2,757 chars
Created
Jun 21, 2026