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

Progress Bars

Ported from HyperUI’s Progress Bars — see Attribution.

Base

Section titled “Base”

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

class NeobrutalismProgressBars1Example extends StatelessWidget {
  const NeobrutalismProgressBars1Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:shadow-white',
        child: FractionallySizedBox(
          widthFactor: 0.25,
          alignment: AlignmentDirectional.centerStart,
          child: Style('h-3 bg-black dark:bg-white'),
        ),
      ),
    );
  }
}

Striped

Section titled “Striped”

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

class NeobrutalismProgressBars2Example extends StatelessWidget {
  const NeobrutalismProgressBars2Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      child: Style(
        'w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:shadow-white',
        child: FractionallySizedBox(
          widthFactor: 0.25,
          alignment: AlignmentDirectional.centerStart,
          child: Style(
            'h-3 bg-[repeating-linear-gradient(45deg,var(--tw-gradient-from)_0,var(--tw-gradient-from)_10px,var(--tw-gradient-to)_10px,var(--tw-gradient-to)_20px)] from-yellow-400 to-yellow-500 dark:from-yellow-500 dark:to-yellow-400',
          ),
        ),
      ),
    );
  }
}

Status

Section titled “Status”

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

class NeobrutalismProgressBars3Example extends StatelessWidget {
  const NeobrutalismProgressBars3Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-md p-6',
      children: [
        Style(
          'flex justify-between gap-4 text-black dark:text-white',
          children: const [
            Style(
              'text-sm font-semibold',
              display: DisplayType.inline,
              child: Text('Updating'),
            ),
            Style(
              'text-sm font-semibold',
              display: DisplayType.inline,
              child: Text('75%'),
            ),
          ],
        ),
        Style(
          'mt-2 w-full border-2 border-black bg-white p-1 shadow-[2px_2px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:shadow-white',
          child: FractionallySizedBox(
            widthFactor: 0.75,
            alignment: AlignmentDirectional.centerStart,
            child: const Style('h-3 bg-green-600 dark:bg-green-300'),
          ),
        ),
      ],
    );
  }
}