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

Textareas

Ported from HyperUI’s Textareas — see Attribution.

Base

Section titled “Base”

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

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


  @override
  State<Textareas1Example> createState() => _Textareas1ExampleState();
}


class _Textareas1ExampleState extends State<Textareas1Example> {
  final _controller = TextEditingController();


  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final isSmUp = MediaQuery.sizeOf(context).width >= 640;
    final fontSize = isSmUp ? 14.0 : 16.0;
    final lineHeight = isSmUp ? 20.0 : 24.0;
    final baseStyle = Theme.of(context).textTheme.bodyLarge ?? const TextStyle();


    return Style(
      'mx-auto max-w-lg p-6',
      children: [
        const Style(
          'text-sm font-medium text-gray-700 dark:text-gray-200',
          display: DisplayType.inline,
          child: Text('Notes'),
        ),
        Style(
          'mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white',
          child: TextFormField(
            controller: _controller,
            maxLines: 4,
            minLines: 4,
            style: baseStyle.copyWith(
              fontSize: fontSize,
              height: lineHeight / fontSize,
              color: isDark ? Colors.white : Colors.black,
            ),
          ),
        ),
      ],
    );
  }
}

Actions inside

Section titled “Actions inside”

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

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


  @override
  State<Textareas2Example> createState() => _Textareas2ExampleState();
}


class _Textareas2ExampleState extends State<Textareas2Example> {
  final _controller = TextEditingController();


  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final isSmUp = MediaQuery.sizeOf(context).width >= 640;
    final fontSize = isSmUp ? 14.0 : 16.0;
    final lineHeight = isSmUp ? 20.0 : 24.0;
    final baseStyle = Theme.of(context).textTheme.bodyLarge ?? const TextStyle();


    return Style(
      'mx-auto max-w-lg p-6',
      children: [
        const Style(
          'text-sm font-medium text-gray-700 dark:text-gray-200',
          display: DisplayType.inline,
          child: Text('Notes'),
        ),
        Style(
          'relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600 dark:border-gray-600',
          children: [
            SizedBox(
              height: 16 + (4 * lineHeight),
              child: Style(
                'w-full resize-none border-none focus:ring-0 sm:text-sm dark:bg-gray-900 dark:text-white',
                child: TextFormField(
                  controller: _controller,
                  maxLines: null,
                  expands: true,
                  style: baseStyle.copyWith(
                    fontSize: fontSize,
                    height: lineHeight / fontSize,
                    color: isDark ? Colors.white : Colors.black,
                  ),
                  decoration: const InputDecoration(
                    border: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    disabledBorder: InputBorder.none,
                    errorBorder: InputBorder.none,
                    focusedErrorBorder: InputBorder.none,
                  ),
                ),
              ),
            ),
            Style(
              'flex items-center justify-end gap-2 p-1.5',
              children: [
                const Style(
                  'rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white',
                  child: Text('Clear'),
                ),
                const Style(
                  'rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700',
                  child: Text('Save'),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

Actions outside

Section titled “Actions outside”

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

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


  @override
  State<Textareas3Example> createState() => _Textareas3ExampleState();
}


class _Textareas3ExampleState extends State<Textareas3Example> {
  final _controller = TextEditingController();


  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final isSmUp = MediaQuery.sizeOf(context).width >= 640;
    final fontSize = isSmUp ? 14.0 : 16.0;
    final lineHeight = isSmUp ? 20.0 : 24.0;
    final baseStyle = Theme.of(context).textTheme.bodyLarge ?? const TextStyle();


    return Style(
      'mx-auto max-w-lg p-6',
      children: [
        const Style(
          'text-sm font-medium text-gray-700 dark:text-gray-200',
          display: DisplayType.inline,
          child: Text('Notes'),
        ),
        Style(
          'mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white',
          child: TextFormField(
            controller: _controller,
            maxLines: 4,
            minLines: 4,
            style: baseStyle.copyWith(
              fontSize: fontSize,
              height: lineHeight / fontSize,
              color: isDark ? Colors.white : Colors.black,
            ),
          ),
        ),
        Style(
          'mt-1.5 flex items-center justify-end gap-2',
          children: [
            const Style(
              'rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white',
              child: Text('Clear'),
            ),
            const Style(
              'rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700',
              child: Text('Save'),
            ),
          ],
        ),
      ],
    );
  }
}