Predefined Flutter widgets

GladeForms comes with set of predefined widget to help you build your forms.

Construct and use your GladeForm

GladeModelProvider

Provides your GladeModel to the widget tree. Uses provider approach under the hood.

GladeModelProvider(
    create: (context) => MyModel(),
    child: MyForm(),
);

GladeFormBuilder

Use GladeFormBuilder to create a form with your model. It provides a builder function that gives you access to the model and rebuilds when the model changes.

GladeFormBuilder<MyModel>(
    builder: (context, model, child) {
        return Column(
            children: [
                TextFormField(
                    initialValue: model.name,
                    onChanged: (value) => model.name = value,
                ),
                ElevatedButton(
                    onPressed: () {
                        if (model.validate()) {
                            // Submit the form
                        }
                    },
                    child: Text('Submit'),
                ),
            ],
        );
    },
);

GladeFormListener

Use GladeFormListener to listen for changes in the model.

GladeFormListener<MyModel>(
    listener: (context, model, updatedKeys) {
        // Respond to model changes

        if (updatedKeys.contains('name')) {
            // React to changes in the name field
        }
    },
);

GladeFormConsumer

Combines GladeFormBuilder and GladeFormListener to react to changes in the model and listen for updates.

Widgets for debugging

Use GladeFormDebugInfo widget to display properties of your model. It helps you to understand what is going on in your model.

Column(children: [
    GladeFormDebugInfo<MyModel>(),

    // ... my form 
]);

Note that you can customize which properties are displayed.

GladeFormDebugInfo Modal

If you prefer to display debugging info as a modal use

GladeFormDebugInfoModal.show(context, your_model);

Getting Started

Advanced Topics