Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

FAQs

Ported from HyperUI’s FAQs — see Attribution.

Base with chevrons

Section titled “Base with chevrons”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _chevronDownSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>''';


const _question = 'Lorem ipsum dolor sit amet consectetur adipisicing?';


const _answer =
    'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic '
    'veritatis molestias culpa in, recusandae laboriosam neque aliquid '
    'libero nesciunt voluptate dicta quo officiis explicabo consequuntur '
    'distinctio corporis earum similique!';


class Faqs1Example extends StatefulWidget {
  const Faqs1Example({super.key});


  @override
  State<Faqs1Example> createState() => _Faqs1ExampleState();
}


class _Faqs1ExampleState extends State<Faqs1Example> {
  var _open0 = true;
  var _open1 = false;
  var _open2 = false;


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'space-y-4',
        children: [
          Style(
            'group [&_summary::-webkit-details-marker]:hidden',
            open: _open0,
            children: [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _open0 = !_open0),
                child: Style(
                  'flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style('text-lg font-medium', child: const Text(_question)),
                    Style(
                      'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                      child: const CurrentColorIcon(_chevronDownSvg),
                    ),
                  ],
                ),
              ),
              if (_open0)
                Style(
                  'px-4 pt-4 text-gray-900 dark:text-white',
                  child: const Text(_answer),
                ),
            ],
          ),
          Style(
            'group [&_summary::-webkit-details-marker]:hidden',
            open: _open1,
            children: [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _open1 = !_open1),
                child: Style(
                  'flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style('text-lg font-medium', child: const Text(_question)),
                    Style(
                      'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                      child: const CurrentColorIcon(_chevronDownSvg),
                    ),
                  ],
                ),
              ),
              if (_open1)
                Style(
                  'px-4 pt-4 text-gray-900 dark:text-white',
                  child: const Text(_answer),
                ),
            ],
          ),
          Style(
            'group [&_summary::-webkit-details-marker]:hidden',
            open: _open2,
            children: [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _open2 = !_open2),
                child: Style(
                  'flex items-center justify-between gap-1.5 rounded-md border border-gray-100 bg-gray-50 p-4 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style('text-lg font-medium', child: const Text(_question)),
                    Style(
                      'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                      child: const CurrentColorIcon(_chevronDownSvg),
                    ),
                  ],
                ),
              ),
              if (_open2)
                Style(
                  'px-4 pt-4 text-gray-900 dark:text-white',
                  child: const Text(_answer),
                ),
            ],
          ),
        ],
      ),
    );
  }
}

Divided with chevrons

Section titled “Divided with chevrons”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _chevronDownSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>''';


const _question = 'Lorem ipsum dolor sit amet consectetur adipisicing?';


const _answer =
    'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic '
    'veritatis molestias culpa in, recusandae laboriosam neque aliquid '
    'libero nesciunt voluptate dicta quo officiis explicabo consequuntur '
    'distinctio corporis earum similique!';


class Faqs2Example extends StatefulWidget {
  const Faqs2Example({super.key});


  @override
  State<Faqs2Example> createState() => _Faqs2ExampleState();
}


class _Faqs2ExampleState extends State<Faqs2Example> {
  var _open0 = true;
  var _open1 = false;
  var _open2 = false;


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flow-root',
        child: Style(
          '-my-4 flex flex-col divide-y divide-gray-200 dark:divide-gray-700',
          children: [
            Style(
              'group py-4 [&_summary::-webkit-details-marker]:hidden',
              open: _open0,
              children: [
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () => setState(() => _open0 = !_open0),
                  child: Style(
                    'flex items-center justify-between gap-1.5 text-gray-900 dark:text-white',
                    cursor: SystemMouseCursors.click,
                    children: [
                      Style('text-lg font-medium', child: const Text(_question)),
                      Style(
                        'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                        child: const CurrentColorIcon(_chevronDownSvg),
                      ),
                    ],
                  ),
                ),
                if (_open0)
                  Style(
                    'pt-4 text-gray-900 dark:text-white',
                    child: const Text(_answer),
                  ),
              ],
            ),
            Style(
              'group py-4 [&_summary::-webkit-details-marker]:hidden',
              open: _open1,
              children: [
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () => setState(() => _open1 = !_open1),
                  child: Style(
                    'flex items-center justify-between gap-1.5 text-gray-900 dark:text-white',
                    cursor: SystemMouseCursors.click,
                    children: [
                      Style('text-lg font-medium', child: const Text(_question)),
                      Style(
                        'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                        child: const CurrentColorIcon(_chevronDownSvg),
                      ),
                    ],
                  ),
                ),
                if (_open1)
                  Style(
                    'pt-4 text-gray-900 dark:text-white',
                    child: const Text(_answer),
                  ),
              ],
            ),
            Style(
              'group py-4 [&_summary::-webkit-details-marker]:hidden',
              open: _open2,
              children: [
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () => setState(() => _open2 = !_open2),
                  child: Style(
                    'flex items-center justify-between gap-1.5 text-gray-900 dark:text-white',
                    cursor: SystemMouseCursors.click,
                    children: [
                      Style('text-lg font-medium', child: const Text(_question)),
                      Style(
                        'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                        child: const CurrentColorIcon(_chevronDownSvg),
                      ),
                    ],
                  ),
                ),
                if (_open2)
                  Style(
                    'pt-4 text-gray-900 dark:text-white',
                    child: const Text(_answer),
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Background

Section titled “Background”

Includes a dark: variant — toggle the site theme (top right) to preview it.

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});


  final String svg;


  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}


const _chevronDownSvg =
    '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>''';


const _question = 'Lorem ipsum dolor sit amet consectetur adipisicing?';


const _answer =
    'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic '
    'veritatis molestias culpa in, recusandae laboriosam neque aliquid '
    'libero nesciunt voluptate dicta quo officiis explicabo consequuntur '
    'distinctio corporis earum similique!';


class Faqs3Example extends StatefulWidget {
  const Faqs3Example({super.key});


  @override
  State<Faqs3Example> createState() => _Faqs3ExampleState();
}


class _Faqs3ExampleState extends State<Faqs3Example> {
  var _open0 = true;
  var _open1 = false;
  var _open2 = false;


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'space-y-4',
        children: [
          Style(
            'group border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden',
            open: _open0,
            children: [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _open0 = !_open0),
                child: Style(
                  'flex items-center justify-between gap-1.5 text-gray-900 dark:text-white',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style('text-lg font-medium', child: const Text(_question)),
                    Style(
                      'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                      child: const CurrentColorIcon(_chevronDownSvg),
                    ),
                  ],
                ),
              ),
              if (_open0)
                Style(
                  'pt-4 text-gray-900 dark:text-white',
                  child: const Text(_answer),
                ),
            ],
          ),
          Style(
            'group border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden',
            open: _open1,
            children: [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _open1 = !_open1),
                child: Style(
                  'flex items-center justify-between gap-1.5 text-gray-900 dark:text-white',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style('text-lg font-medium', child: const Text(_question)),
                    Style(
                      'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                      child: const CurrentColorIcon(_chevronDownSvg),
                    ),
                  ],
                ),
              ),
              if (_open1)
                Style(
                  'pt-4 text-gray-900 dark:text-white',
                  child: const Text(_answer),
                ),
            ],
          ),
          Style(
            'group border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 [&_summary::-webkit-details-marker]:hidden',
            open: _open2,
            children: [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _open2 = !_open2),
                child: Style(
                  'flex items-center justify-between gap-1.5 text-gray-900 dark:text-white',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style('text-lg font-medium', child: const Text(_question)),
                    Style(
                      'size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180',
                      child: const CurrentColorIcon(_chevronDownSvg),
                    ),
                  ],
                ),
              ),
              if (_open2)
                Style(
                  'pt-4 text-gray-900 dark:text-white',
                  child: const Text(_answer),
                ),
            ],
          ),
        ],
      ),
    );
  }
}