Form

A behavioral boundary that coordinates descendant FormField widgets.

Learn more: Forms & validation

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Form(
  controller: form,
  onSubmit: saveProject,
  child: Column(children: [
    FormField(
      validator: () => name.text.isEmpty ? 'Enter a name.' : null,
      child: TextInput(controller: name),
    ),
    Button(text: 'Save', onPressed: form.submit),
  ]),
)

Details

Form owns no values and imposes no panel, wizard, or field layout. Values stay in ordinary application state and validators close over that state.

Constructors

Form()

Creates a behavioral form boundary around child.

Parameter	Type	Default	Description
controller:	FormController?	—	Optional externally-owned command surface. More
semanticLabel:	String?	—	Accessible name for this form when the surrounding heading is not enough.
onSubmit:	FutureOr<void> Function()	required	Called after every mounted, enabled field validates successfully. More
child:	Widget	required	The application-defined form layout.

• controller: When omitted, Form creates one that descendants can read with of.
• onSubmit: An error it throws or returns goes to whoever submitted: a caller that awaits FormController.submit receives it. One that doesn’t, such as a button or the form’s semantic submit action, leaves it uncaught, and runApp reports it and keeps the app running.

Source

Form is defined in packages/fleury/lib/src/catalog/form.dart.

Category: Forms · All widgets

Live demo

project_form.dart

Restart Run Expand

Example · editable Revert Format

import 'package:fleury/fleury_core.dart';

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

  @override
  State<ProjectForm> createState() => _ProjectFormState();
}

class _ProjectFormState extends State<ProjectForm> {
  final form = FormController();
  final name = TextEditingController();
  final slug = TextEditingController();
  String status = 'Fill in the project details';

  @override
  void dispose() {
    form.dispose();
    name.dispose();
    slug.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Padding(
    padding: const EdgeInsets.all(1),
    child: Form(
      controller: form,
      onSubmit: () => setState(() {
        status =
            'Created ${name.text.trim()} '
            '(${slug.text.trim()})';
      }),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('Name'),
          FormField(
            validator: () => name.text.trim().isEmpty
                ? 'Enter a project name.'
                : null,
            child: TextInput(
              controller: name,
              semanticLabel: 'Name',
              placeholder: 'e.g. My project',
              autofocus: true,
            ),
          ),
          const SizedBox(height: 1),
          const Text('Slug'),
          FormField(
            validator: () =>
                RegExp(
                  r'^[a-z0-9-]+$',
                ).hasMatch(slug.text.trim())
                ? null
                : 'Use lowercase letters, numbers, and hyphens.',
            child: TextInput(
              controller: slug,
              semanticLabel: 'Slug',
              placeholder: 'e.g. my-project',
              onSubmit: (_) => form.submit(),
            ),
          ),
          const SizedBox(height: 1),
          Button(text: 'Create', onPressed: form.submit),
          const SizedBox(height: 1),
          Text('status: $status'),
        ],
      ),
    ),
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand