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

Newsletter Signup

Ported from HyperUI’s Newsletter Signup — see Attribution.

Simple signup

Section titled “Simple signup”

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

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


  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final baseStyle = Theme.of(context).textTheme.bodyLarge ?? const TextStyle();


    return Style(
      'bg-gray-100 dark:bg-gray-800',
      child: Style(
        'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
        children: [
          Style(
            'max-w-prose',
            children: [
              const Style(
                'text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white',
                child: Text('Sign up for our newsletter'),
              ),
              const Style(
                'mt-4 text-pretty text-gray-700 dark:text-gray-200',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas sequi.',
                ),
              ),
            ],
          ),
          Style(
            'mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center',
            children: [
              Style(
                'flex-1',
                children: [
                  const Style('sr-only', child: Text('Email')),
                  Style(
                    'h-12 w-full rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white',
                    child: Builder(
                      builder: (context) {
                        final borderColor = isDark
                            ? tailwindColors['gray']![600]!
                            : tailwindColors['gray']![300]!;
                        final border = OutlineInputBorder(
                          borderRadius: BorderRadius.circular(4),
                          borderSide: BorderSide(color: borderColor),
                        );
                        const lineHeight = 24.0;
                        const vPad = (48 - lineHeight) / 2;
                        return TextFormField(
                          keyboardType: TextInputType.emailAddress,
                          style: baseStyle.copyWith(
                            color: isDark ? Colors.white : Colors.black,
                            letterSpacing: 0,
                          ),
                          decoration: InputDecoration(
                            hintText: 'Enter your email',
                            hintStyle: TextStyle(
                              color: tailwindColors['gray']![500],
                              letterSpacing: 0,
                            ),
                            isDense: true,
                            filled: true,
                            fillColor: isDark
                                ? tailwindColors['gray']![900]
                                : Colors.white,
                            contentPadding: const EdgeInsets.symmetric(
                              horizontal: 12,
                              vertical: vPad,
                            ),
                            border: border,
                            enabledBorder: border,
                            focusedBorder: border,
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
              Style(
                'h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 dark:text-white dark:hover:bg-indigo-700 dark:hover:text-white',
                cursor: SystemMouseCursors.click,
                button: true,
                child: const Text('Sign Up'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Simple signup centered

Section titled “Simple signup centered”

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

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


  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final baseStyle = Theme.of(context).textTheme.bodyLarge ?? const TextStyle();


    return Style(
      'bg-gray-100 dark:bg-gray-800',
      child: Style(
        'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
        children: [
          Style(
            'mx-auto max-w-prose text-center',
            children: [
              const Style(
                'text-2xl font-semibold text-gray-900 sm:text-3xl dark:text-white',
                child: Text('Sign up for our newsletter'),
              ),
              const Style(
                'mt-4 text-pretty text-gray-700 dark:text-gray-200',
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas sequi.',
                ),
              ),
            ],
          ),
          Style(
            'mx-auto mt-6 flex max-w-xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-center',
            children: [
              Style(
                'flex-1',
                children: [
                  const Style('sr-only', child: Text('Email')),
                  Style(
                    'h-12 w-full rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white',
                    child: Builder(
                      builder: (context) {
                        final borderColor = isDark
                            ? tailwindColors['gray']![600]!
                            : tailwindColors['gray']![300]!;
                        final border = OutlineInputBorder(
                          borderRadius: BorderRadius.circular(4),
                          borderSide: BorderSide(color: borderColor),
                        );
                        const lineHeight = 24.0;
                        const vPad = (48 - lineHeight) / 2;
                        return TextFormField(
                          keyboardType: TextInputType.emailAddress,
                          style: baseStyle.copyWith(
                            color: isDark ? Colors.white : Colors.black,
                            letterSpacing: 0,
                          ),
                          decoration: InputDecoration(
                            hintText: 'Enter your email',
                            hintStyle: TextStyle(
                              color: tailwindColors['gray']![500],
                              letterSpacing: 0,
                            ),
                            isDense: true,
                            filled: true,
                            fillColor: isDark
                                ? tailwindColors['gray']![900]
                                : Colors.white,
                            contentPadding: const EdgeInsets.symmetric(
                              horizontal: 12,
                              vertical: vPad,
                            ),
                            border: border,
                            enabledBorder: border,
                            focusedBorder: border,
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
              Style(
                'h-12 rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 dark:text-white dark:hover:bg-indigo-700 dark:hover:text-white',
                cursor: SystemMouseCursors.click,
                button: true,
                child: const Text('Sign Up'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}