Welcome to Glade Forms!
Versatile Forms framework
Developed with 💚 by netglade
A universal way to define form validators with support of translations.
👀 What is this?
Glade Forms offer unified way to define reusable form inputs with support of fluent API to define input's validators and with support of translation on top of that.
Mannaging forms in Flutter is... unpleasant.
With Glade Forms you create a model that holds glade inputs, setup validation, translation, dependencies, handling of updates, and more with ease.
🚀 Getting started
To start, setup a Model class that holds glade inputs together.
class MyModel extends GladeModel {
late GladeStringInput name;
late GladeIntInput age;
late GladeStringInput email;
@override
List<GladeInput<Object?>> get inputs => [name, age, email];
@override
void initialize() {
name = GladeStringInput();
age = GladeIntInput(value: 0, useTextEditingController: true);
email = GladeStringInput(validator: (validator) => (validator..isEmail()).build());
// Always remember to call initialize() at the end
super.initialize();
}
}
Then use GladeFormBuilder
and connect the model to standard Flutter form and it's inputs like this:
GladeFormBuilder(
create: (context) => MyModel(),
builder: (context, model) => Form(
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(labelText: 'Name'),
// connect a controller from glade input
controller: model.name.controller,
// connect a validator from glade input
validator: model.name.textFormFieldInputValidator,
),
TextFormField(
controller: model.age.controller,
validator: model.age.textFormFieldInputValidator,
decoration: const InputDecoration(labelText: 'Age'),
),
TextFormField(
controller: model.email.controller,
validator: model.email.textFormFieldInputValidator,
decoration: const InputDecoration(labelText: 'Email'),
),
const SizedBox(height: 10),
ElevatedButton(onPressed: model.isValid ? () {} : null, child: const Text('Save')),
],
),
),
)
🔍 DevTools Extension
Glade Forms includes a powerful Flutter DevTools extension for debugging forms in real-time!
Features:
- 🔎 Inspect all active
GladeModelinstances - 📊 View input values and validation states
- ✅ Monitor form dirty/pure states
- Real-time updates as you interact with your app
How to use:
- Run your Flutter app in debug mode
- Open Flutter DevTools (
Dart: Open DevToolsin VS Code) - Navigate to the "Glade Forms" tab
- Interact with your forms and watch the state update live!
No additional setup required - the extension is automatically available when you use glade_forms.