quick_form 1.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 66

Flutter Form Helper #

Creates simple forms very quickly.

The goal was to just define the fields in the form and have it wire up the focus nodes, validation, callbacks and give you a Map with the form data. It's created for basic forms and prototyping use, but I will be using it in my own projects and will add features as I go.

Example #

  • Main with 3 Forms and Tabs
  • OnChange and OnSubmit wired up
BasicCustomSimple
Basic FormCustom FormSimple Form

Reading Results #

Register onFormSubmitted and onFormChanged callbacks that will send a Map<String, String> for you to work with. Required fields and Validations must pass for these callbacks to be triggered. However you can disable validations from FormBuilder if necessary to trigger these methods every time they are pressed.

Form Spec #

The form is defined as a list of

Example: https://github.com/ahammer/flutter_form_helper/blob/master/quick_form/example/lib/src/sample_form.dart

const Field(
      {@required this.name,         // Name of this field
      this.validators = const [],   // A list of validators
      this.mandatory = false,       // Is this field mandatory?
      this.obscureText = false,     // Password Field
      this.value = "",              // Default Value
      this.group,                   // Group (for Radio)
      this.type = FieldType.text,   // FieldType (text/radio/checkbox)
      this.label                    // Label to be displayed as hint
      });

Building your form #

Extension Syntax

              sampleForm.buildSimpleForm(                      
                  onFormSubmitted: resultsCallback,
                  onFormChanged: (map) => setChangedString(map.toString()),
                  uiBuilder: customFormBuilder),
                  

Widget Syntax

              FormBuilder(
                  uiBuilder: customFormBuilder
                  form: sampleForm,
                  onFormSubmitted: resultsCallback,
                  onFormChanged: (map) => setChangedString(map.toString())),

Or inline from a list of field names.

 ["Name", "Title", "Address"].buildSimpleForm(
                  onFormSubmitted: resultsCallback,
                  onFormChanged: onChanged)

You can provide a UI Builder, or use the Built in one that will just build a form in a scrollable view with a bottom below.

To build a Custom Form layout, provide a UI Builder which can use helper.getWidget(name) to add the widgets where you want and customize the layout however you want. E.g. Use "submit" name to create a submit button. E.g. helper.getWidget("submit")

Example: https://github.com/ahammer/flutter_form_helper/blob/master/example/lib/src/custom_form_builder.dart

Version 1.0.0

  • Initial Release

Version 1.0.1

  • Satisfy pub.dev complaints

example/lib/main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:quick_form/quick_form.dart';
import 'src/custom_form_builder.dart';
import 'src/sample_form.dart';

/// A key to the Scaffold Root
/// Allows me to wire up dialogs easily
final GlobalKey _scaffoldKey = GlobalKey();

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(FormTestApp());
}

/// Form Testing App, Sample Project
///
/// This widget has a Tab bar that let's you switch between
/// 2 presentations of the same form
///
/// 1) The simple auto-generated form
/// 2) A custom form presentation
///
class FormTestApp extends StatefulWidget {
  @override
  _FormTestAppState createState() => _FormTestAppState();
}

class _FormTestAppState extends State<FormTestApp>
    with SingleTickerProviderStateMixin {
  TabController controller;
  String onChangedString;

  void setChangedString(String changedString) => setState(() {
        onChangedString = changedString;
      });

  @override
  void initState() {
    controller = TabController(length: 3, vsync: this);    
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Form Demo',
        home: Scaffold(
            key: _scaffoldKey,
            body: SafeArea(
                child: Column(
              children: <Widget>[
                TabBar(onTap: (_)=>setChangedString(null),
                  labelColor: Theme.of(context).colorScheme.primary,
                  controller: controller,
                  tabs: const <Widget>[
                    Tab(text: "Simple"),
                    Tab(text: "Custom"),
                    Tab(text: "Ultra-Simple")
                  ],
                ),
                Expanded(
                    child:
                        TabBarView(controller: controller, children: <Widget>[
                  /// Simple Form Builder Widget with default UI
                  FormBuilder(
                      form: sampleForm,
                      onFormSubmitted: resultsCallback,
                      onFormChanged: (map) => setChangedString(map.toString())),

                  /// Simple Form Builder with custom form UI, Extension Syntax
                  
                  sampleForm.buildSimpleForm(                      
                      onFormSubmitted: resultsCallback,
                      onFormChanged: (map) => setChangedString(map.toString()),
                      uiBuilder: customFormBuilder),
                      
                  /// Unvalidated form using ExtensionSyntax
                  ["Name", "Title", "Address"].buildSimpleForm(
                      onFormSubmitted: resultsCallback,
                      onFormChanged: (map) => setChangedString(map.toString()))
                ])),
                Text(onChangedString ?? "No Results Yet")
              ],
            ))),
      );
}

/// Form Results Callback
///
/// Show the results in a Dialog
void resultsCallback(Map<String, String> results) => showDialog<void>(
    context: _scaffoldKey.currentContext,
    builder: (context) => Padding(
          padding: const EdgeInsets.all(64),
          child: Card(
              child: Text(results.keys.fold(
                  "",
                  (previousValue, element) =>
                      "$previousValue$element = ${results[element]}\n"))),
        ));

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  quick_form: ^1.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:quick_form/quick_form.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
32
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
66
Learn more about scoring.

We analyzed this package on May 26, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
effective_dart ^1.2.0
flutter_test