Hướng dẫn và ví dụ Flutter flutter_form_builder

dependencies:
  flutter_form_builder: ^9.3.0
  form_builder_validators: ^11.0.0

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: MyLoginPage(),
    );
  }
}

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

  @override
  State<MyLoginPage> createState() => _MyLoginPageState();
}

class _MyLoginPageState extends State<MyLoginPage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Flutter FormBuilder Demo"),
      ),
      body: FormBuilder(
        key: _formKey,
        child: Column(
          children: [
            FormBuilderTextField(
              name: 'email',
              decoration: const InputDecoration(labelText: 'Email'),
              validator: FormBuilderValidators.compose(
                [
                  FormBuilderValidators.required(),
                  FormBuilderValidators.email(),
                ],
              ),
            ),
            const SizedBox(height: 10),
            FormBuilderTextField(
              name: 'password',
              decoration: const InputDecoration(labelText: 'Password'),
              obscureText: true,
              validator: FormBuilderValidators.compose(
                [
                  FormBuilderValidators.required(),
                ],
              ),
            ),
            const SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    bool isValid = _formKey.currentState?.validate(
                          autoScrollWhenFocusOnInvalid: true,
                          focusOnInvalid: true,
                        ) ??
                        false;
                    debugPrint(_formKey.currentState?.instantValue.toString());
                    //
                    if (isValid) {
                      // Submit to Server...
                    }
                  },
                  child: const Text('Login'),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () {
                    _formKey.currentState?.reset();
                  },
                  child: const Text('Reset'),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

bool isValid = _formKey.currentState?.validate(
      autoScrollWhenFocusOnInvalid: true,
      focusOnInvalid: true,
    ) ??
    false;
debugPrint(_formKey.currentState?.instantValue.toString());
//
if (isValid) {
  // Submit to Server...
}

// _formKey.currentState?.save(..)

// Save state of data and validate data.
bool isValid = _formKey.currentState?.saveAndValidate(
      autoScrollWhenFocusOnInvalid: true,
      focusOnInvalid: true,
    ) ??
    false;

FormBuilderTextField(
  autovalidateMode: AutovalidateMode.always,
  name: 'age',
  decoration: InputDecoration(
    labelText: 'Age',
    suffixIcon: _ageHasError
        ? const Icon(Icons.error, color: Colors.red)
        : const Icon(Icons.check, color: Colors.green),
  ),
  onChanged: (val) {
    setState(() {
      _ageHasError =
          !(_formKey.currentState?.fields['age']?.validate() ??
              false);
    });
  },
  // valueTransformer: (text) => num.tryParse(text),
  validator: FormBuilderValidators.compose(
    [
      FormBuilderValidators.required(),
      FormBuilderValidators.numeric(),
      FormBuilderValidators.max(70),
    ],
  ),
  // initialValue: '12',
  keyboardType: TextInputType.number,
  textInputAction: TextInputAction.next,
),

FormBuilderCheckbox(
  name: 'accept_terms',
  initialValue: false,
  onChanged: (bool? value) {
    // Code..
  },
  title: RichText(
    text: TextSpan(
      children: [
        const TextSpan(
          text: 'I have read and agree to the ',
          style: TextStyle(color: Colors.black),
        ),
        WidgetSpan(
          alignment: PlaceholderAlignment.middle,
          child: InkWell(
            child: const Text(
              "Terms and Conditions",
              style: TextStyle(color: Colors.blue),
            ),
            onTap: () {
              // Open Link
            },
          ),
        ),
      ],
    ),
  ),
  validator: FormBuilderValidators.equal(
    true,
    errorText: 'You must accept terms and conditions to continue',
  ),
),

FormBuilderCheckbox(
  name: 'checkboxName',
  initialValue: false,
  tristate: true,
  onChanged: (bool? value) {
    // Code..
  },
  title: const Text("Title"),
  subtitle: const Text("Subtitle"),
  secondary: const Icon(Icons.image),
),

FormBuilderSwitch(
  title: const Text('I Accept the terms and conditions'),
  name: 'accept_terms_switch',
  initialValue: false,
  onChanged: (bool? value) {
    print("Value: $value");
  },
  validator: FormBuilderValidators.equal(
    true,
    errorText: 'You must accept terms and conditions to continue',
  ),
),

FormBuilderCheckboxGroup<String>(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  decoration: const InputDecoration(
    labelText: 'Select Languages:',
  ),
  name: 'languages',
  initialValue: const ['Dart'],
  options: const [
    FormBuilderFieldOption(value: 'Dart'),
    FormBuilderFieldOption(value: 'Kotlin'),
    FormBuilderFieldOption(value: 'Java'),
    FormBuilderFieldOption(value: 'Swift'),
    FormBuilderFieldOption(value: 'Objective-C'),
  ],
  onChanged: (List<String>? langs) {
    // Code..
  },
  separator: const SizedBox(width: 8.0),
  validator: FormBuilderValidators.compose(
    [
      FormBuilderValidators.minLength(1),
      FormBuilderValidators.maxLength(3),
    ],
  ),
  orientation: OptionsOrientation.wrap,
),

FormBuilderCheckboxGroup<String>(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  decoration: const InputDecoration(
    labelText: 'Select Languages:',
  ),
  name: 'languages',
  initialValue: const ['Dart'],
  options: const [
    FormBuilderFieldOption(value: 'Dart'),
    FormBuilderFieldOption(value: 'Kotlin'),
    FormBuilderFieldOption(value: 'Java'),
    FormBuilderFieldOption(value: 'Swift'),
    FormBuilderFieldOption(value: 'Javascript'),
    FormBuilderFieldOption(value: 'Delphi'),
    FormBuilderFieldOption(value: 'Pascal'),
    FormBuilderFieldOption(value: 'C/C++'),
    FormBuilderFieldOption(value: 'Golang'),
    FormBuilderFieldOption(value: 'Visual Basic'),
  ],
  orientation: OptionsOrientation.wrap,
  separator: const SizedBox(
    height: 20,
    child: VerticalDivider(),
  ),
  wrapSpacing: 10,
  wrapRunSpacing: 20,
  wrapRunAlignment: WrapAlignment.end,
  validator: FormBuilderValidators.compose(
    [
      FormBuilderValidators.minLength(1),
      FormBuilderValidators.maxLength(3),
    ],
  ),
  onChanged: (List<String>? langs) {
    // Code..
  },
),

FormBuilderRadioGroup<String>(
  decoration: const InputDecoration(
    labelText: 'My chosen language',
  ),
  initialValue: null,
  name: 'best_language',
  onChanged: (String? value) {
    print("Value: $value");
  },
  validator: FormBuilderValidators.compose(
    [
      FormBuilderValidators.required(),
    ],
  ),
  options: ['Dart', 'Kotlin', 'Java', 'Swift', 'Objective-C']
      .map(
        (lang) => FormBuilderFieldOption(
          value: lang,
          child: Text(lang),
        ),
      )
      .toList(growable: false),
  controlAffinity: ControlAffinity.trailing,
)

FormBuilderChoiceChip<String>(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  spacing: 5,
  labelPadding: const EdgeInsets.all(0),
  visualDensity: const VisualDensity(
    vertical: -3,
    horizontal: -3,
  ),
  decoration: const InputDecoration(
    labelText: 'Select Languages:',
    isDense: true,
    contentPadding: EdgeInsets.all(10),
  ),
  name: 'languages_choice',
  initialValue: 'Dart',
  options: const [
    FormBuilderChipOption(
      value: 'Dart',
      avatar: CircleAvatar(),
    ),
    FormBuilderChipOption(
      value: 'Kotlin',
      avatar: CircleAvatar(),
    ),
    FormBuilderChipOption(
      value: 'Java',
      avatar: CircleAvatar(),
    ),
    FormBuilderChipOption(
      value: 'Swift',
      avatar: CircleAvatar(),
    ),
    FormBuilderChipOption(
      value: 'Objective-C',
      avatar: CircleAvatar(),
    ),
  ],
  onChanged: (String? value) {
    print("Value: $value");
  },
),

FormBuilderFilterChip<String>(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  spacing: 10,
  decoration: const InputDecoration(
    labelText: 'Select Languages',
  ),
  name: 'languages_filter',
  selectedColor: Colors.blue.withAlpha(80),
  options: const [
    FormBuilderChipOption(
      value: 'Dart',
      avatar: CircleAvatar(),
    ),
    FormBuilderChipOption(
      value: 'Kotlin',
      avatar: CircleAvatar(),
    ),
    FormBuilderChipOption(
      value: 'Java',
      avatar: CircleAvatar(),
    ),
    FormBuilderChipOption(
      value: 'Swift',
      avatar: CircleAvatar(),
    ),
    FormBuilderChipOption(
      value: 'Objective-C',
      avatar: CircleAvatar(),
    ),
  ],
  onChanged: (List<String>? values) {
    // Code..
  },
  validator: FormBuilderValidators.compose(
    [
      FormBuilderValidators.minLength(1),
      FormBuilderValidators.maxLength(3),
    ],
  ),
),

FormBuilderDateRangePicker(
  name: 'date_range',
  firstDate: DateTime(1970),
  lastDate: DateTime(2030),
  format: DateFormat('yyyy-MM-dd'),
  initialValue: DateTimeRange(
    start: DateTime(2000, 1, 1),
    end: DateTime(2020, 2, 1),
  ),
  onChanged: (DateTimeRange? range) {
    print("Range: $range");
  },
  decoration: InputDecoration(
    labelText: 'Date Range',
    helperText: 'Helper text',
    hintText: 'Hint text',
    suffixIcon: IconButton(
      icon: const Icon(Icons.close),
      onPressed: () {
        _formKey.currentState!.fields['date_range']
            ?.didChange(null);
      },
    ),
  ),
),

FormBuilderDateTimePicker(
  name: 'date',
  initialEntryMode: DatePickerEntryMode.calendar,
  initialValue: DateTime.now(),
  inputType: InputType.both,
  decoration: InputDecoration(
    labelText: 'Appointment Time',
    suffixIcon: IconButton(
      icon: const Icon(Icons.close),
      onPressed: () {
        _formKey.currentState!.fields['date']?.didChange(null);
      },
    ),
  ),
  initialTime: const TimeOfDay(hour: 8, minute: 0),
),

FormBuilderDropdown<String>(
  name: 'gender',
  decoration: InputDecoration(
    labelText: 'Gender',
    suffix: _genderHasError
        ? const Icon(Icons.error)
        : const Icon(Icons.check),
    hintText: 'Select Gender',
  ),
  validator: FormBuilderValidators.compose(
    [
      FormBuilderValidators.required(),
    ],
  ),
  items: ['Male', 'Female', 'Other']
      .map(
        (gender) => DropdownMenuItem(
          alignment: AlignmentDirectional.centerStart,
          value: gender,
          child: Text(gender),
        ),
      )
      .toList(),
  onChanged: (val) {
    bool hasError =
        !(_formKey.currentState?.fields['gender']?.validate() ??
            false);
    setState(() {
      _genderHasError = hasError;
    });
  },
  valueTransformer: (val) => val?.toString(),
),

FormBuilderSlider(
  name: 'slider',
  validator: FormBuilderValidators.compose(
    [
      FormBuilderValidators.min(6),
    ],
  ),
  onChanged: (double? value) {
    print("Value: $value");
  },
  min: 0.0,
  max: 10.0,
  initialValue: 7.0,
  divisions: 20,
  activeColor: Colors.red,
  inactiveColor: Colors.pink[100],
  decoration: const InputDecoration(
    labelText: 'Number of things',
  ),
),

FormBuilderRangeSlider(
  name: 'range_slider',
  onChanged: (RangeValues? range) {
    print("Range: $range");
  },
  min: 0.0,
  max: 100.0,
  initialValue: const RangeValues(4, 7),
  divisions: 20,
  maxValueWidget: (max) => TextButton(
    onPressed: () {
      _formKey.currentState?.patchValue(
        {'range_slider': const RangeValues(4, 100)},
      );
    },
    child: Text(max),
  ),
  activeColor: Colors.red,
  inactiveColor: Colors.pink[100],
  decoration: const InputDecoration(labelText: 'Price Range'),
),