0 purchases
Description:
tf form
TFForm #
A Flutter package for creating a form container to group multiple common form widgets together and validate them automatically.
Copyright (c) 2022 TechFusion Ltd (https://www.techfusion.dev)
TL;DR #
Video example: https://cloud.techfusion.dev/9EIzr4pOMZ40aedOr9X8
Installing #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
tf_form: ^0.0.6
copied to clipboard
In your library add the following import:
import 'package:tf_form/tf_form.dart';
copied to clipboard
Widgets #
TFForm #
The TFForm widget acts as a container for grouping and validating multiple form widgets provided by package. It requires a GlobalKey to allow validation of the form in a later step. Also, you can configure error messages or style the form by passing arguments to the constructor.
final _formKey = GlobalKey<TFFormState>();
@override
Widget build(BuildContext context) {
// Build a TFForm widget using the _formKey created above.
return TFForm(
key: _formKey,
child: Column(
children: <Widget>[
// Add form widgets and ElevatedButton here.
],
),
);
}
copied to clipboard
TFTextField #
A text field is the most popular form widget. It lets the user enter text, either with hardware keyboard or with an onscreen keyboard.
TFTextField(
title: "Nickname",
hintText: "Enter a nickname",
controller: nicknameController,
validationTypes: const [
TFValidationType.required,
],
),
copied to clipboard
This package supports ios number input with Done button out of the box. All you need to enable this feature is specify:
keyboardType with one of those types:
TextInputType.number,
TextInputType.phone,
TextInputType.numberWithOptions(decimal: true),
copied to clipboard
Preview:
TFDropdownField #
A dropdown field allows the user to pick a value from a dropdown list
TFDropdownField(
title: "Role",
items: [
TFOptionItem<String>(title: "Member", value: "member"),
TFOptionItem<String>(title: "Administrator", value: "admin"),
TFOptionItem<String>(title: "Manager", value: "manager")
],
controller: roleController,
initialValue: "member",
validationTypes: const [
TFValidationType.required,
],
),
copied to clipboard
TFDateField #
A date field allows the user to pick a DateTime.=
TFDateField(
title: "Birthday",
initialDate: DateTime.now(),
firstDate: DateTime.now().subtract(const Duration(days: 365)),
lastDate: DateTime.now().add(const Duration(days: 365)),
controller: birthdayController,
validationTypes: const [
TFValidationType.required,
],
),
copied to clipboard
TFRadioGroup #
A radio group allows user to select one option from multiple selections
TFCheckboxGroup<String>(
title: "Which social network do you usually use ?",
initialValues: const ["fb", "telegram"],
items: [
TFOptionItem<String>(title: "Facebook", value: "fb"),
TFOptionItem<String>(title: "Twitter", value: "twitter"),
TFOptionItem<String>(title: "Linkedin", value: "linkedin"),
TFOptionItem<String>(title: "Telegram", value: "telegram"),
],
onChanged: (List<String> values) {
print("$values");
},
validationTypes: const [
TFValidationType.required,
],
),
copied to clipboard
TFCheckboxGroup #
A checkbox group allows user to select multiple items
TFRadioGroup<String>(
title: "Gender",
initialValue: "male",
items: [
TFOptionItem<String>(title: "Male", value: "male"),
TFOptionItem<String>(title: "Female", value: "female"),
TFOptionItem<String>(title: "Other", value: "other"),
],
onChanged: (selectedItem) {
print("$selectedItem");
},
validationTypes: const [
TFValidationType.requiredIfHas,
],
relatedController: nicknameController,
),
copied to clipboard
TFRecaptchaField #
A field to load Google's reCAPTCHA v3 token and set value to a TextEditingController's instance, so it can be posted with other fields of the form.
It requires a remote html page which is configured in Google reCAPTCHA admin console so reCAPTCHA js can work properly.
TFRecaptchaField(controller: recaptchaController, uri: Uri.parse("https://www.anhcode.com/recaptcha.html")),
copied to clipboard
Example html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reCAPTCHA</title>
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY" async defer></script>
<script>
function sendBack(msg) {
if (typeof tf_form !== "undefined") {
tf_form.postMessage(msg);
}
}
window.onload = function () {
grecaptcha.ready(function () {
grecaptcha.execute('YOUR_RECAPTCHA_SITE_KEY', {action: 'submit'}).then(sendBack);
});
}
</script>
</head>
<body>
</body>
</html>
copied to clipboard
Basic Usage #
First, create a TFForm
Add one of the above form widgets as children of TFForm. The TFForm simply makes it easier to validate all at once.
Finally, create a button to validate the form.
ElevatedButton(
onPressed: () {
_formKey.currentState!.validate();
},
child: const Text('Submit'),
),
copied to clipboard
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files In This Product:
Customer Reviews
There are no reviews.
