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

Dividers

Ported from HyperUI’s Dividers — see Attribution.

Base

Section titled “Base”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flex items-center',
        children: const [
          Style('h-px flex-1 bg-gray-300 dark:bg-gray-600'),
          Style(
            'shrink-0 px-4 text-gray-900 dark:text-white',
            child: Text('Title goes here'),
          ),
          Style('h-px flex-1 bg-gray-300 dark:bg-gray-600'),
        ],
      ),
    );
  }
}

Gradient

Section titled “Gradient”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flex items-center',
        children: const [
          Style(
            'h-px flex-1 bg-linear-to-r from-transparent to-gray-300 dark:to-gray-600',
          ),
          Style(
            'shrink-0 px-4 text-gray-900 dark:text-white',
            child: Text('Title goes here'),
          ),
          Style(
            'h-px flex-1 bg-linear-to-l from-transparent to-gray-300 dark:to-gray-600',
          ),
        ],
      ),
    );
  }
}

Left align

Section titled “Left align”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flex items-center',
        children: const [
          Style(
            'shrink-0 pe-4 text-gray-900 dark:text-white',
            child: Text('Title goes here'),
          ),
          Style('h-px flex-1 bg-gray-300 dark:bg-gray-600'),
        ],
      ),
    );
  }
}

Left align gradient

Section titled “Left align gradient”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flex items-center',
        children: const [
          Style(
            'shrink-0 pe-4 text-gray-900 dark:text-white',
            child: Text('Title goes here'),
          ),
          Style(
            'h-px flex-1 bg-linear-to-l from-transparent to-gray-300 dark:to-gray-600',
          ),
        ],
      ),
    );
  }
}

Right align

Section titled “Right align”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flex items-center',
        children: const [
          Style('h-px flex-1 bg-gray-300 dark:bg-gray-600'),
          Style(
            'shrink-0 ps-4 text-gray-900 dark:text-white',
            child: Text('Title goes here'),
          ),
        ],
      ),
    );
  }
}

Right align gradient

Section titled “Right align gradient”

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

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


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flex items-center',
        children: const [
          Style(
            'h-px flex-1 bg-linear-to-r from-transparent to-gray-300 dark:to-gray-600',
          ),
          Style(
            'shrink-0 ps-4 text-gray-900 dark:text-white',
            child: Text('Title goes here'),
          ),
        ],
      ),
    );
  }
}