Forms

Forms

A form is essentially a container that can be used to hold any amount of any subset of several types of data. HTML forms are used to pass data to a server. VB and C# forms are the windows used to interact with the user.
Mike  Kozey

Mike Kozey

1657539840

Extended_forms: Adds Extended Functionality to Flutter form Widgets

Flutter extended forms

Imgur

Extends functionality on standard flutter form Widgets: Currently only adds extended functionality to TextFormField.

NOTE: This project is still very much work in progress.

Global Features

  • Advanced Async/sync validation.
  • Firestore set/update/get integration (WIP).
  • Debounce timers.
  • Convinient static field titles.

Firestore integration features (WIP)

  • Use firestore value as initial value
  • Automatically set value in firestore with Debounce timer.
  • Trigger set value in firestore with on submit.

TextFormField extended features

  • Suffix actions - Show multiple suffix icons (with callbacks) based on validation status.
  • Progress indicator - Optionally provide a custom progress widget to display when async validation is in progress.
  • Submit suffix action - Optionally provide a custom 'submit' icon/widget when validation qualifies.
  • Clear suffix action - Optionally provide a custom 'clear' icon/widget when validation does not qualify.

Validation Features

  • Easily create and use Async/sync validators.
  • Debounce timers.
  • Acccounts for both external and internal validation prior to form submission.
  • Easily specify custom validator message; per validator.

Getting started

Import the package.

import 'package:extended_forms/extended_forms.dart';

Create some validators with a debounce time.

const validatorDebounceDuration = Duration(seconds: 2);

final validatorsUsername = [
  ExtendedValidator(
      validator: (String value) => value.length <= 4,
      message: 'Must be longer than 4 characters.',
      isAsync: false),
  ExtendedValidator(
      validator: (String value) => value.isEmpty,
      message: 'Cannot be empty.',
      isAsync: false),
  ExtendedValidator(
      validator: asyncValidator,
      message: 'Cannot contiain whitespace.',
      // Specify if is an async valdiator.
      isAsync: true),
];

// Some long running task simulation.
Future<bool> asyncValidator(String value) async {
  await Future.delayed(const Duration(seconds:3));
  return value.contains(' ');
}

Usage

ExtendedTextFormField(
  // A convinience field to easily add a fixed label above.
  labelTop: const Text('Username'),
  // Specify a progress indicator that shows during async validation.
  suffixActionsProgressIndicator:
      const LinearProgressIndicator(),
  // Specify an icon for the "submit" suffix action button.
  suffixActionSubmitIcon: const Icon(Icons.check),
  // Specify an icon for the "clear" suffix action button.
  suffixActionClearIcon: const Icon(Icons.clear),
  // Whether to clear the field on submit (doesn't work for onFieldSubmitted).
  suffixActionClearOnSubmit: false,
  // Whether to validate the value before submitting - Evaluates `ExtendedValidator`'s.
  validateBeforeSubmitting: true,
  // The function to call when submit is tapped.
  suffixActionSubmitOnTap: print,
  // A `List` of `ExtendedValidator` to validate against.
  validators: validatorsUsername,
  // Specify a global debounce time for the specified `ExtendedValidator`'s.
  validatorDebounceDuration: validatorDebounceDuration,
),

Installing

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add extended_forms

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  extended_forms: ^0.0.8

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:extended_forms/extended_forms.dart';

example/lib/main.dart

import 'package:extended_forms/extended_validation.dart';
import 'package:flutter/material.dart';
import 'package:extended_forms/extended_forms.dart';

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

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: Home());
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Extended Forms'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Center(
            child: Column(
              children: [
                ExtendedTextFormField(
                  // A convinience field to easily add a fixed label above.
                  labelTop: const Text('Username'),
                  // Specify a progress indicator that shows during async validation.
                  suffixActionsProgressIndicator:
                      const LinearProgressIndicator(),
                  // Specify an icon for the "submit" suffix action button.
                  suffixActionSubmitIcon: const Icon(Icons.check),
                  // Specify an icon for the "clear" suffix action button.
                  suffixActionClearIcon: const Icon(Icons.clear),
                  // Whether to clear the field on submit (doesn't work for onFieldSubmitted).
                  suffixActionClearOnSubmit: false,
                  // Whether to validate the value before submitting - Evaluates `ExtendedValidator`'s.
                  validateBeforeSubmitting: true,
                  // The function to call when submit is tapped.
                  suffixActionSubmitOnTap: print,
                  // A `List` of `ExtendedValidator` to validate against.
                  validators: validatorsUsername,
                  // Specify a global debounce time for the specified `ExtendedValidator`'s.
                  validatorDebounceDuration: validatorDebounceDuration,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

const validatorDebounceDuration = Duration(seconds: 2);

final validatorsUsername = [
  ExtendedValidator(
      validator: (String value) => value.length <= 4,
      message: 'Must be longer than 4 characters.',
      isAsync: false),
  ExtendedValidator(
      validator: (String value) => value.isEmpty,
      message: 'Cannot be empty.',
      isAsync: false),
  ExtendedValidator(
      validator: asyncValidator,
      message: 'Cannot contiain whitespace.',
      // Specify if is an async valdiator.
      isAsync: true),
];

// Some long running task simulation.
Future<bool> asyncValidator(String value) async {
  await Future.delayed(const Duration(seconds:3));
  return value.contains(' ');
}

Additional information

Direct contributions, issues and suggestions => here.

Author: p4-k4
Source Code: https://github.com/p4-k4/flutter_extended_forms 
License: MIT license

#flutter #dart #forms #extended 

Extended_forms: Adds Extended Functionality to Flutter form Widgets

Uniforms: A React Library for Building Forms From any Schema

vazco/uniforms

A set of React libraries for building forms from every schema.

What's included?

License

Like every package maintained by Vazco, uniforms packages are MIT licensed.

Author: Vazco
Source Code: https://github.com/vazco/uniforms 
License: MIT license

#react #typescript #forms 

Uniforms: A React Library for Building Forms From any Schema
Ivan Petrenko

Ivan Petrenko

1651655242

Overview of JavaScript Form Widgets - DZone Web Dev

Overview of JavaScript Form Widgets

A web form is probably the main communication channel between a user and a web application. It commonly serves for gathering important information from end-users that can trigger updates on the client-side or be stored in the database on the server-side. Poorly designed or confusing forms can cause a lot of inconvenience to end-users and application owners. Therefore, it is necessary to pay serious attention to the proper implementation of forms and their features such as labels, notifications, validation rules, etc.

The task of integrating forms like any other interface elements into web apps can be significantly simplified by utilizing JavaScript UI libraries. Such tools are very popular among programmers, as they help to accelerate the development process and reduce the number of errors in the codebase.

In this article, we will consider form widgets and form-related controls included in popular UI libraries.

#web-development #JavaScript #webapp  #forms

DHTMLX Form

DHTMLX Suite provides a range of widgets for seamlessly adding feature-packed UI components to any web project. The list of available solutions includes a cross-browser JavaScript/HTML5 Form. It enables you to use 14 various form controls and group them in the desired way for building forms of any complexity. Apart from standard elements (input fields, checkboxes, action buttons, etc.), your form can contain a file uploader, slider, datepicker, and other useful controls from the Suite package. Predefined validation rules and notification messages ensure that users submit only valid data. Notification messages help to avoid any misconceptions during the form completion. If necessary, you can also disable any form options or hide them. 

 

DHTMLX online exam system demo

A rich API of DHTMLX Form allows you to customize forms in accordance with your project requirements. For instance, textual data in form labels can be displayed in various languages to be understood by users from different countries. Any styling adjustments are performed via CSS. The initialization process of this widget takes just a few simple steps.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

Webix Form

Webix delivers a collection of UI widgets for creating various parts of a user interface, including forms. The Form widget helps to obtain any kind of information from users and transfer it for further processing with the help of numerous controls and the validation feature. It is possible to set a common configuration for all form controls. If your form should include a particular number of digits/vowels (credit cards, telephone numbers, etc.), you can specify a pattern for formatting inputted data. It is not a problem to disable form elements or switch to the read-only mode.

The Form widget can be combined with other Webix components for displaying complex forms. You can separate a big form into logical parts and attach to them text labels using Fieldset and Section components. Another option is to divide a form with the help of tabs and segmented buttons, thereby forming a multiview layout. Webix data widgets (e.g. List) employ the Form as editors. Webix also offers the HTMLForm widget that allows you to upgrade simple HTML forms with the Webix Form API and also use it with other Webix widgets. You can also benefit from using a special Webix tool (Form Builder) for generating forms. 

Compatible with: Angular, React, Vue.js, Backbone

Useful resources: documentation, samples

Kendo UI Form

The Form component is a part of the Kendo UI library. It is intended for generating and managing forms in web applications. This UI tool comes with a number of configuration and customization options to facilitate the implementation process.

In addition to the default layout, you can apply the grid layout (up to 12 columns) in your form. This option is supported only in modern browsers. Positioning of form elements in a more intuitive manner is achieved with the grouping function. There are two modes for showing form labels (vertical and horizontal). The Kendo form comes with a customizable built-in validator. This important feature is set in action on the submission and can include the validation summary i.e. the list of validation errors. The form component also supports the MVVM pattern and modern accessibility standards.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

DevExtreme Form Layout

DevExtreme Form is a JavaScript UI widget designed by DevExpress as a jQuery plugin. The form’s UI is represented as a range of label-editor combinations that correspond to data fields. All form elements can be arranged in three different ways: columns, groups, and tabs. There is also an empty item utilized for adding space between form items. This widget is optimized for displaying on desktops and mobile devices and allows you to predefine the number of form columns displayed on the screen depending on its size. 

Values entered in the form fields are checked before saving thanks to a validation engine. Using this engine, you can set various validation rule types, including custom and server-side validations that can be disabled dynamically. Moreover, it is possible to modify form items and define their visibility status at runtime. It should be noted that such changes cause updates of just altered items without re-rendering of the whole form.

Compatible with: Angular, React, Vue.js

Useful resources: documentation, samples

Overview of JavaScript Form Widgets - DZone Web Dev
Lawrence  Lesch

Lawrence Lesch

1643488860

Lightweight JavaScript form validation library inspired by CodeIgniter

validate.js

validate.js is a lightweight JavaScript form validation library inspired by CodeIgniter.

Features

  • Validate form fields from over a dozen rules
  • No dependencies
  • Customizable Messages
  • Supply your own validation callbacks for custom rules
  • Chainable customization methods for ease of declaration
  • Works in all major browsers, (even IE6!)
  • Modeled off the CodeIgniter form validation API

How to use

    var validator = new FormValidator('example_form', [{
        name: 'req',
        display: 'required',
        rules: 'required'
    }, {
        name: 'alphanumeric',
        rules: 'alpha_numeric'
    }, {
        name: 'password',
        rules: 'required'
    }, {
        name: 'password_confirm',
        display: 'password confirmation',
        rules: 'required|matches[password]'
    }, {
        name: 'email',
        rules: 'valid_email'
    }, {
        name: 'minlength',
        display: 'min length',
        rules: 'min_length[8]'
    }, {
        names: ['fname', 'lname'],
        rules: 'required|alpha'
    }], function(errors) {
        if (errors.length > 0) {
            // Show the errors
        }
    });

Documentation

You can view everything at http://rickharrison.github.com/validate.js

Browserify

It is published to npm under validate-js

npm install validate-js

Plugins

jQuery: https://github.com/magizh/validate_helper

Multi-Language Support

jnhwkim's fork added multi-language support viewable at https://github.com/jnhwkim/validate.js

Chinese - https://github.com/chilijung/validate.js

French - https://github.com/Facyla/validate.js

Brazilian Portuguese - https://github.com/fabiowitt/validate.js

Author: Rickharrison
Source Code: https://github.com/rickharrison/validate.js 
License: View license

#javascript #forms #codeigniter 

Lightweight JavaScript form validation library inspired by CodeIgniter
Mike  Kozey

Mike Kozey

1642998900

Dead Simple Field/object Schema Validation for Flutter

ez_validator

Dead simple field/object schema validation for flutter 
EzValidator api is inspired by Yup

EzValidator

EzValidator is a flutter schema builder for value validation. Define a schema, validate the shape of an existing value, or both. EzValidator allow single or object validations

Installing

Add EzValidator to your pubspec:

dependencies:
  ez_validator: any # or the latest version on Pub

Usage

You define your schema object. check the exemple folder of how to use validation with multiple form with showing errors

EzSchema mySchema = EzSchema.shape({
  "email": EzValidator().required().email().build(),
  "password": EzValidator()
      .required()
      .minLength(6)
      .matches(
          r'^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{6,}$',
          'Minimum six characters, at least one letter, one number and one special character')
      .build(),
  "age": EzValidator().required().min(18).build(),
}, identicalKeys: true);

// check validity

Map<String, String> errors = mySchema.validateSync({
  "email": 'iheb@pixelium.tn',
  "password": '444',
  "age": "17"
});

print(errors);

// output if the form not valid
//
//  {
//    "password": "Minimum six characters, at least one letter, one number and one special character",
//    "age": "The field must be greater than or equal to 18"
//  }
//
//
// output if the form is valid
//{}

exemple of using defaultTest

EzSchema mySchema = EzSchema.shape({
  .....
  "sum": EzValidator()
        .required()
        .defaultTest(
            'Test not valid please recheck', (v) => int.parse(v as String) > 25)
        .build(),
  ....
};

Showcase

with default localewith custom locale

Methods

.required([String? message])

Validates if the value is not empty or null.

.minLength(int minLength, [String? message])

Validates if the value length is not less than minLength.

.maxLength(int maxLength, [String? message])

Validates if the value length is not more than maxLength.

.min(int min, [String? message])

Validates if the value is lesser or equal to min.

.max(int max, [String? message])

Validates if the value is higher or equal max.

.positive([String? message])

Validates if the value is positive.

.negative([String? message])

Validates if the value is negative.

.email([String? message])

Checks if the value is an email address.

.uiid([String? message])

Checks if the value is a valid uuid.

.number([String? message])

Checks if the value is a number.

.boolean([String? message])

Checks if the value is boolean (true,false).

.date([String? message])

Checks if the value is a date type.

.notNumber([String? message])

Checks if the value is not a number.

.lowerCase([String? message])

Checks if the value is on lowercase.

.upperCase([String? message])

Checks if the value is on uppercase.

.oneOf(List<String?> items,[String? message])

Checks if the value is one of the follwoing items.

.notOneOf(List<String?> items,[String? message])

Checks if the value is not one of the follwoing items.

.phone([String? message])

Checks if the value is a phone number.

.ip([String? message])

Checks if the value is correct IPv4 address.

.ipv6([String? message])

Checks if the value is correct IPv6 address.

.url([String? message])

Checks if the value is correct url address.

.matches(String pattern, [String? message])

Validates if the value does matches with the pattern.

.defaultTest(String message, bool Function(String? v) test)

Validates the value with your own validation logic

Copyright

Validator code inspired from form_validator

Author: X-SLAYER
Source Code: https://github.com/X-SLAYER/EzValidator 
License: MIT License

#flutter #forms 

Dead Simple Field/object Schema Validation for Flutter
Lana Miro

Lana Miro

1642495076

JetFormBuilder plugin for Gutenberg | Full Overview

JetFormBuilder WordPress form plugin for Gutenberg | Full Overview

Wondered how to build custom Gutenberg #forms? Check out our step-by-step walkthrough video on JetFormBuilder for #Gutenberg. With this WordPress forms plugin, you can create an eye-catching contact form for any Gutenberg-based website fast and with a little effort. #JetFormBuilder is 100% free! 

Download it here:

https://wordpress.org/plugins/jetformbuilder/ 

Or via official website: https://jetformbuilder.com/ 

✏️ Find out how to create and set up a form in Gutenberg Block Editor 

✏️ Build WordPress contact form with captcha verification to avoid bots 

✏️ Integrate form with MailChimp, GetResponse, or ActiveCampaign

✏️ Set Field Visibility to identify the users, who can fill out the form 

✏️ Make use of Radio Field to specify the type of request: question, suggestion, or else 

✏️ Apply Media Fields to allow attaching images right in the contact form 

✏️ Set Post Submit Actions to get the relevant notifications from the site 

✏️ Learn how to add a Form Block to the page and give it the look you need 

✏️Apply JetStyleManager plugin to finetune the elements of your contact form Stay tuned for more useful tutorials about Gutenberg Block Editor and Crocoblock plugins.

https://www.youtube.com/watch?v=WB0B3QLhZK0 

JetFormBuilder plugin for Gutenberg | Full Overview
React Dev

React Dev

1642477569

Create Beautiful React Forms | Formik with Material UI Tutorial for Beginners

In this tutorial we will create reusabble form components that connects Formik and Material UI. We will create a custom textField component and a select component.

Github Repo: https://github.com/angle943/formik-material-ui 
Formik Website: https://jaredpalmer.com/formik/docs/overview 
Material-UI Website: https://material-ui.com/getting-started/installation/ 

Subscribe: https://www.youtube.com/c/JustinKimJS/featured 

#react  #formik  #materialui  #typescript  #forms 

Create Beautiful React Forms | Formik with Material UI Tutorial for Beginners
Bella  Bauch

Bella Bauch

1638652740

Create Forms in Flutter (Flutter Form Builder Tutorial)

Learn how to create forms in flutter, how to read forms or form fields, how to reset forms, how to validate forms and how to save your form's data. In this tutorial I introduce you to the best flutter form package available called Flutter Form Builder from the developer Danvick Miller. This flutter package enables you to create complex forms without the usual boilerplate. This video covers all aspects from the very basics like creating forms from scratch to more detailed instructions like: how form fields and their properties work, how to create custom form fields, how to use the built-in validation and create custom validators, how to create conditional validation and how to make use of internationalization within your forms.

⌚ TIMESTAMPS:

00:00 - Start
01:09 - Contribution
[FORM BASICS]
02:30 - FormBuilder Basics
07:36 - Reset form
08:25 - Read fields
09:53 - Save & read form
11:33 - "skipDisabled" addendum
12:20 - Validate form
[CORE ATTRIBUTES]
14:52 - Core Attributes
[FORM FIELDS]
17:12 - Built-in fields
22:09 - Custom fields
24:14 - Changing field values
[VALIDATION]
25:03 - Built-in validators
27:36 - Custom validator
28:54 - Multiple validators
30:34 - Conditional validation
31:30 - Custom errors
33:10 - Autovalidate modes
[INTERNATIONALIZATION]
34:15 - Internationalization
35:15 - Closing words

#flutter  #forms  #tutorial 

Create Forms in Flutter (Flutter Form Builder Tutorial)

React Validate Form

Validate form in React. In this video, you'll learn how to validate a login form in react application.

Source code : https://github.com/jay3dec/react-field-validation-demo

#react-native #forms 

React Validate Form

Basic Validation Properties Of form Elements

In this video, you will learn what are the different validation properties of an element inside a form using validation properties of ng model.

GitHub link:
https://github.com/saikorthivada/angular-tutorials/tree/form-validation-properties

#angular #forms 

 Basic Validation Properties Of form Elements
Dipesh Malvia

Dipesh Malvia

1634210779

Form Validation using React | React Forms Handling & Validation Tutorial | React Sign up Form

Form Validation using React | React Forms Handling & Validation Tutorial | React Sign up Form

In this video we will learn how we can handle and validate Forms in React without using any external package or library. We will validate the form using React Hooks.

⭐️GitHub link for Reference⭐️ https://github.com/dmalvia/React_Forms_Tutorials/tree/use-native 

⭐️ Support my channel⭐️ https://www.buymeacoffee.com/dipeshmalvia 

***React Roadmap for Developers in 2021*** 

***Checkout these video to understand better*** 

***More videos*** 

***Checkout my Crash courses for get started with web development*** 

🔗 Social Medias 🔗 

⭐️ Hashtags ⭐️

  •  #react #forms #hooks #beginners #tutorial #relevel 

Disclaimer: It doesn't feel good to have a disclaimer in every video but this is how the world is right now. All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

https://youtu.be/EYpdEYK25Dc

Form Validation using React | React Forms Handling & Validation Tutorial | React Sign up Form

A Flutter Package for Building Settings Forms

A flutter package for building settings forms. This includes a library of pre-built form field widgets. It supports both Material and Cupertino style.

Screenshot

This package consists of a CardSettings layout wrapper and a series of form field options including:

  • Text Fields
    • CardSettingsText - Basic text field
    • CardSettingsParagraph - Multiline text field with a counter
    • CardSettingsEmail - A text field pre-configured for email input
    • CardSettingsPassword - A text field pre-configured for passwords
    • CardSettingsPhone - A masked phone entry field (US style currently)
  • Numeric Fields
    • CardSettingsDouble - Field for double precision numbers
    • CardSettingsInt - Field for integer numbers
    • CardSettingsCurrency - Field for currency entry
    • CardSettingsSwitch - Field for boolean state
  • Pickers
    • CardSettingsListPicker - Picker list of arbitrary options
    • CardSettingsNumberPicker - Picker list of numbers in a given range
    • CardSettingsRadioPicker - Single items picker with radio buttons
    • CardSettingsSelectionPicker - Single selection from a list with optional icons
    • CardSettingsCheckboxPicker - Select multiples from a list of available options
    • CardSettingsColorPicker - Picker for colors with three flavors: RGB, Material, and Block
    • CardSettingsDatePicker - Date Picker
    • CardSettingsTimePicker - Time Picker
    • CardSettingsDateTimePicker - Combo Date and Time Picker
    • CardSettingsFilePicker - Upload a file from the device
  • Informational Sections
    • CardSettingsHeader - A control to put a header between form sections
    • CardSettingsInstructions - Informational read-only text
  • Actions
    • CardSettingsButton - Actions buttons for the form

All fields support validate, onChange, onSaved, autovalidate, and visible.

The package also includes these additonal items:

  • CardSettingsField - The base layout widget. You can use this to build custom fields
  • Converters - a set of utility functions to assist in converting data into and out of the fields

Simple Example

All fields in this package are compatible with the standard Flutter Form widget. Simply wrap the CardSettings control in a form and use it as you normally would with the form functionality.

  String title = "Spheria";
  String author = "Cody Leet";
  String url = "http://www.codyleet.com/spheria";

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
      body: Form(
        key: _formKey,
        child: CardSettings(
          children: <CardSettingsSection>[
            CardSettingsSection(
              header: CardSettingsHeader(
                label: 'Favorite Book',
              ),
              children: <CardSettingsWidget>[
                CardSettingsText(
                  label: 'Title',
                  initialValue: title,
                  validator: (value) {
                    if (value == null || value.isEmpty) return 'Title is required.';
                  },
                  onSaved: (value) => title = value,
                ),
                CardSettingsText(
                  label: 'URL',
                  initialValue: url,
                  validator: (value) {
                    if (!value.startsWith('http:')) return 'Must be a valid website.';
                  },
                  onSaved: (value) => url = value,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

If you would like separate cards for each section, then use the .sectioned constructor:

        child: CardSettings.sectioned(
          ...
        ),

See the full demo example here.

Theming

The style of the widgets can be either Material or Cupertino. There is a toggle on the CardSettings widget to globally change the style:

  return CardSettings(
    showMaterialonIOS: true, // default is false
  );

This also exists on each field widget, in case you want to control this more granularly.

If you are using the Material design style, then the MaterialApp theme takes effect. This example shows what global theme values to set to determine how the various elements appear.

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Card Settings Example',
      home: new HomePage(),
      theme: ThemeData(
        primaryColor: Colors.teal, // app header background
        secondaryHeaderColor: Colors.indigo[400], // card header background
        cardColor: Colors.white, // card field background
        backgroundColor: Colors.indigo[100], // app background color
        buttonColor: Colors.lightBlueAccent[100], // button background color
        textTheme: TextTheme(
          button: TextStyle(color: Colors.deepPurple[900]), // button text
          subtitle1: TextStyle(color: Colors.grey[800]), // input text
          headline6: TextStyle(color: Colors.white), // card header text
        ),
        primaryTextTheme: TextTheme(
          headline6: TextStyle(color: Colors.lightBlue[50]), // app header text
        ),
        inputDecorationTheme: InputDecorationTheme(
          labelStyle: TextStyle(color: Colors.indigo[400]), // style for labels
        ),
      ),
    );
  }
}

Or if you want to apply a different theme to the CardSettings hierarchy only, you can wrap it in a Theme widget like so:

  Theme(
    data: Theme.of(context).copyWith(
      primaryTextTheme: TextTheme(
        headline6: TextStyle(color: Colors.lightBlue[50]), // app header text
      ),
      inputDecorationTheme: InputDecorationTheme(
        labelStyle: TextStyle(color: Colors.deepPurple), // style for labels
      ),
    ),
    child: CardSettings(
      ...
    ),
  )

Please see https://pub.dev/packages/flutter_material_pickers#-readme-tab- for information on how to theme the dialog popups.

Card Style

By default, in Material mode, the content is inside a Card or Cards (if sectioned).

Carded

If you would rather just have a flat style with no border, set cardless to false.

Cardless

  return CardSettings(
    cardless: true; // default is false
  );

This has no effect in Cupertino mode, as that doesn't have a card to begin with.

You can also change the actual card styleing through the theme for example:

Custom

  cardTheme: CardTheme(
    shape: RoundedRectangleBorder(
      side: BorderSide(width: 2, color: Colors.orange),
      borderRadius: BorderRadius.circular(20),
    ),
  ),

Global Properties

The CardSettings widget implements a few global settings that all child fields can inherit. Currently it supports only label customization.

Labels

You can control how the labels are rendered with four properties:

  CardSettings(
    labelAlign: TextAlign.right, // change the label alignment
    labelWidth: 120.0, // change how wide the label portion is
    labelSuffix: ':', // add an optional tag after the label
    labelPadding: 10.0, // control the spacing between the label and the content
    contentAlign: TextAlign.left, // alignment of the entry widgets
    icon: Icon(Icons.person), // puts and option icon to the left of the label
    requiredIndicator: Text('*', style: TextStyle(color: Colors.red)), // puts an optional indicator to the right of the label
  )

The labelAlign and contentAlign properties are also available on each field, so you can override the global setting for individual fields.

  CardSettingsText(
    label: 'Last Name',
    labelAlign: TextAlign.left,
    contentAlign: TextAlign.right,
  )

Headers

CardSettingsHeader provides properties to set the color, height, and label alignment. However, if you wish to completely override the default header style and replace it with something custom, you can use the child property to pass in your own widget tree:

header: CardSettingsHeader(
  child: Container(
    height: 80,
    child: Row(
      children: [
        Expanded(child: Divider(color: Colors.purple, thickness: 5)),
        Text('Custom Header', style: TextStyle(fontSize: 20)),
        Expanded(child: Divider(color: Colors.purple, thickness: 5)),
      ],
    ),
  ),
),

Dynamic Visibility

Each field implements a visible property that you can use to control the visibility based on the value of other fields. In this example, the switch field controls the visibility of the text field:

  bool _ateOut = false;

  CardSettingsSwitch(
    label: 'Ate out?',
    initialValue: _ateOut,
    onChanged: (value) => setState(() => _ateOut = value),
  ),

  CardSettingsText(
    label: 'Restaurant',
    visible: _ateOut,
  ),

Masking

The CardSettingsText widget has an inputMask property that forces entered text to conform to a given pattern. This is built upon the flutter_masked_text package and as such masks are formatted with the following characters:

  • 0: accept numbers
  • A: accept letters
  • @: accept numbers and letters
  • *: accept any character

So for example, phone number would be '(000) 000-0000'.

Note: CardSettingsPhone is a convenience widget that is pre-configured to use this pattern.

Caution: flutter_masked_text is a controller and as such, you will not be able to use an inputMask and a custom controller at the same time. This might be rectified in the future.

Orientation

This suite allows for orientation switching. To configure this, build different layouts depending on the orientation provided by MediaQuery.

You might want to have different fields in each layout, or a different field order. So that Flutter doesn't get confused tracking state under this circumstance, you must provide a unique state key for each individual field, using the same key in each layout.

@override
Widget build(BuildContext context) {

  final GlobalKey<FormState> _emailKey = GlobalKey<FormState>();
  var orientation = MediaQuery.of(context).orientation;

  return Form
    key: _formKey,(
    child: (orientation == Orientation.portraitUp)
        ? CardSettings(children: <Widget>[
              // Portrait layout here
              CardSettingsEmail(key: _emailKey)
            ])
        : CardSettings(children: <Widget>[
              // Landscape layout here
              CardSettingsEmail(key: _emailKey)
            ]);
    },
  );
}

You may have multiple fields on the same row in landscape orientation. This normally requires the use of container widgets to provide the layout inside the row. Instead, you can use the CardFieldLayout helper widget to streamline this. It will by default make it's children equally spaced, but you can provide an array of flex values to control the relative sizes.

// equally spaced example
CardSettings(
  children: <Widget>[
    CardFieldLayout(children: <Widget>[
      CardSettingsEmail(),
      CardSettingsPassword(),
    ]),
  ],
);
// relative width example
CardSettings(
  children: <Widget>[
    CardFieldLayout_FractionallySpaced(
      children: <Widget>[
        CardSettingsEmail(),
        CardSettingsPassword(),
      ],
      flexValues: [2, 1], // 66% and 33% widths
    ),
  ],
);

Custom Fields

The CardSettingsField is the basis of all other fields and can be used to build unique fields outside of this library. Its purpose is to govern layout with consistent decorations. The best way to make a custom field is to inherit from FormField<T>, which will manage the state of your field. The cleanest example of this is the CardSettingsSwitch widget. All you have to do is provide your custom widgets in the content property.

Custom Widgets

If you wish to provide a custom widget that is not a field type layout, you need to implement the CardSettingsWidget interface as so:

class CardSettingsHeader extends StatelessWidget implements CardSettingsWidget {
  ...
}

Screenshots

MaterialCupertino
ScreenshotScreenshot
:-------------------------::-------------------------:
ScreenshotScreenshot
:-------------------------::-------------------------:
ScreenshotScreenshot

Dependencies

This widget set relies on these external third-party components:

Changelog

Please see the Changelog page to know what's recently changed.

Contributions

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.

If you fixed a bug or implemented a new feature, please send a pull request. Please include a note about your change in CHANGELOG.md with your pull request.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add card_settings

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  card_settings: ^3.0.0

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:card_settings/card_settings.dart'; 

example/example.md

CardSettings Example

Demonstrates how to use the card_settings package.

Example Code

A full example of all controls in a settings form are shown in this file:

/lib/example.dart

Complete Example Structure

lib
├───plumbing
│   ├───model.dart - data for the example
│   ├───results.dart - method to show the results using the example
│   ├───scaffold.dart - wrapper of the example layout
│   └───theme.dart - ability to show exampel with a light or dark theme
├───example.dart - the actual example to consider
└───main.dart - App entry 

Download Details:

Author: codegrue

Source Code: https://github.com/codegrue/card_settings

#flutter #forms 

A Flutter Package for Building Settings Forms

Flutter Package Simplifying The Process of Creating User Friendly form

Flutter Auto Form

The easiest way to create fully customizable forms with only a tiny amount of code.

Installation

To use this plugin, add flutter_auto_form as a dependency in your pubspec.yaml file.

pubspec.yaml 

 

dependencies:
  flutter:
    sdk: flutter

  # Your other packages  ...

  flutter_auto_form: ^0.2.7

Support

  • Platforms: All platforms currently supported
  • Autofill hints: Automatic support through AFTextFieldType
  • Validators: Email, Url, Hex colour, Not null, Minimum string length, Same as another field, Alphanumeric.
  • Fields: Password (auto obscure toggle), Text, Number, Model (built-in support for search through an api), Boolean
  • Custom code: You can customize and create new fields, validators, widgets as you please without even touching the source code of this package !

Example

The following gif illustrates some things you can realize with this package.

The source code is located in the example folder.

Usage

The first step in creating a form with Flutter Auto Form is to create a class inheriting from the TemplateForm class.

import 'package:flutter_auto_form/flutter_auto_form.dart';

import 'package:flutter_auto_form/flutter_auto_form.dart';

class LoginForm extends TemplateForm {
  @override
  final List<Field> fields = [
    AFTextField(
      id: 'identifier',
      name: 'Identifier',
      validators: [
        MinimumStringLengthValidator(
          5,
              (e) => 'Min 5 characters, currently ${e?.length ?? 0} ',
        )
      ],
      type: AFTextFieldType.USERNAME,
    ),
    AFTextField(
      id: 'password',
      name: 'Password',
      validators: [
        MinimumStringLengthValidator(
          6,
              (e) => 'Min 6 characters, currently ${e?.length ?? 0} ',
        )
      ],
      type: AFTextFieldType.PASSWORD,
    ),
    AFBooleanField(
      id: 'accept-condition',
      name: 'Accept terms',
      validators: [ShouldBeTrueValidator('Please accept terms to continue?')],
      value: false,
    )
  ];
}

The second & (already) last step is to add the AFWidget wherever you would like to display a form.

AFWidget<RegistrationForm>(
  formBuilder: () => RegistrationForm(),
  submitButton: (Function({bool showLoadingDialog}) submit) => Padding(
    padding: const EdgeInsets.only(top: 32),
    child: MaterialButton(
      child: Text('Submit'),
      onPressed: () => submit(showLoadingDialog: true),
    ),
  ),
  onSubmitted: (RegistrationForm form) {
    // do whatever you want when the form is submitted
    print(form.toMap());
  },
);

The AFTextField and AFNumberField are the only two fields available by defaults for the time being.

Advanced usage

If you need to create your own field (date field, color field, ...) you can always create it by overriding the Field class. Then override the buildField method of the AFThemeData class and wrap your top level widget with a AFTheme widget to which you give your customized AFThemeData as argument.

 

This package is still under construction ! Do not hesitate to create an issue on the GitHub page if you find any bug or if you would like to see a new type of validator, field coming. And if you are that motivated if you would gladly review & accept your PR !

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_auto_form

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_auto_form: ^0.2.7

Alternatively, your editor might support or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_auto_form/flutter_auto_form.dart'; 

example/lib/main.dart

import 'package:auto_form_example/forms/order_form.dart';
import 'package:flutter/material.dart';
import 'package:flutter_auto_form/flutter_auto_form.dart';

import 'forms/login_form.dart';
import 'forms/registration_form.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AFTheme(
      child: MaterialApp(
        title: 'Auto Form Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 3,
        child: Scaffold(
          body: SingleChildScrollView(
            child: SizedBox(
              height: MediaQuery.of(context).size.height - 50,
              child: Column(
                children: [
                  Expanded(
                    child: TabBarView(
                      children: [
                        FormShowcaseTile(
                          title: 'Login form',
                          child: AFWidget<LoginForm>(
                            handleErrorOnSubmit: print,
                            formBuilder: () => LoginForm(),
                            submitButton:
                                (Function({bool showLoadingDialog}) submit) {
                              return Padding(
                                padding: const EdgeInsets.only(top: 32),
                                child: ElevatedButton(
                                  child: const Text('Submit'),
                                  onPressed: () =>
                                      submit(showLoadingDialog: true),
                                ),
                              );
                            },
                            onSubmitted: (LoginForm form) async {
                              await Future.delayed(const Duration(seconds: 2));
                              print(form.toMap());
                            },
                          ),
                        ),
                        FormShowcaseTile(
                          title: 'Registration form',
                          child: AFWidget<RegistrationForm>(
                            formBuilder: () => RegistrationForm(),
                            submitButton:
                                (Function({bool showLoadingDialog}) submit) {
                              return Padding(
                                padding: const EdgeInsets.only(top: 32),
                                child: ElevatedButton(
                                  child: const Text('Submit'),
                                  onPressed: () =>
                                      submit(showLoadingDialog: true),
                                ),
                              );
                            },
                            onSubmitted: (RegistrationForm form) {
                              print(form.toMap());
                            },
                          ),
                        ),
                        FormShowcaseTile(
                          title: 'Order form',
                          child: AFWidget<OrderForm>(
                            formBuilder: () => OrderForm(),
                            submitButton:
                                (Function({bool showLoadingDialog}) submit) {
                              return Padding(
                                padding: const EdgeInsets.only(top: 32),
                                child: ElevatedButton(
                                  child: const Text('Submit'),
                                  onPressed: () =>
                                      submit(showLoadingDialog: true),
                                ),
                              );
                            },
                            onSubmitted: (OrderForm form) {
                              print(form.toMap());
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.all(16),
                    child: TabPageSelector(),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class FormShowcaseTile extends StatelessWidget {
  const FormShowcaseTile({Key? key, required this.child, required this.title})
      : super(key: key);

  final String title;

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.symmetric(vertical: 64, horizontal: 24),
        padding: const EdgeInsets.all(24),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            boxShadow: const [
              BoxShadow(
                blurRadius: 16,
                color: Colors.black12,
                offset: Offset(0, 10),
              ),
            ],
            color: Colors.white),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 16),
              child: Text(
                title,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.blueAccent,
                ),
              ),
            ),
            child,
          ],
        ),
      ),
    );
  }
} 

Download Details:

Author: GaspardMerten

Source Code: https://github.com/GaspardMerten/flutter_auto_form

#flutter #forms 

Flutter Package Simplifying The Process of Creating User Friendly form
Reggie  Hudson

Reggie Hudson

1631667300

Easiest How to Create Fillable Forms in Microsoft Word In 2021

Learn how to create a fillable form in Word using form components inside of Microsoft Word that users can fill in.

🕐 Timestamps:
00:00 Introduction

#microsoft  #forms 

Easiest How to Create Fillable Forms in Microsoft Word In 2021

Twig Macros: Customize the form prototype for a set of forms

Well then, we have a short video about macros and how to use them to customize the rendering of the prototype generated by a collection of forms.

The repository used as an example. https://github.com/konshensx16/embed-collection-of-forms

#customize #prototype #forms

Twig Macros: Customize the form prototype for a set of forms