flutter_formly 0.1.1

flutter_formly #

Create Dynamic Flutter Forms with customization of field logic from JSON.

Getting Started #

Include flutter_formly in your pubspec.yaml and save to download the package.

Components #

Formly Contains widgets and different types to create a fully functional Flutter form, some of the major types are as follows:

FormlyForm #

A Statefull widget Container to create the all formly fields as a ListView in its builder.

FieldConfig #

A class to create a dynamic field. Field config has following properties:

a. key is a the json property of the form Map model.
b. type tell the FormlyForm to create an appropriate field e.g ..type = 'radio' will create a radio type field.
c. onChange call back method on every change event.
d. validators takes an array of FormlyValidator which runs onChange or onSubmit based on FormlyValidator bool propery onChange. Each FormlyValidator class has property validator which is a callback method for validation, which should return null on all times except when error and then it should return an error message string.
e. asyncValidators similar to validators but designed for Future returning validators of type AsyncFormlyValidator. The future should however return a true or false. The message property will be used on error message.
f. templateOptions takes an object of type FormlyTemplateOptions which has properties for setting label, hint and icon for the field.
g. options takes an array of SelectOption for type radio and select fields. h. hideFunction takes a call back function which if returns true will hide this field.

Create a basic Formly Form #

In your builder method of statefull or state less widget use the FormlyForm widget like below:

    class Demo extends StatefulWidget {
      final Widget child;

      Demo({Key key, this.child}) : super(key: key);

      _DemoState createState() => _DemoState();
    }
    class DemoState extends State<Demo> {
        var _lights = false;
        List<FieldConfig> createFields() {
            return <FieldConfig>[
                FieldConfig()
                ..key = 'radio'
                ..type = 'radio' 
                ..onChange = print
                ..defaultValue = 'female'
                ..validators = [
                  FormlyValidator()
                  ..name = 'male'
                  ..onChange = true
                  ..validator = (model, field) => model[field.key] == 'male' ? null : 'Only Males allowed'
                ]
                ..asyncValidators = [
                  AsyncFormlyValidator()
                  ..name = 'maleAsync'
                  ..message = 'Only Males Allowed'
                  ..onChange = true
                  ..validator = (model, field) => Future.delayed(Duration(seconds: 1)).then((v) => NullThrownError())
                ]
                ..options = [
                  SelectOption()
                  ..name = 'Male'
                  ..value = 'male',
                  SelectOption()
                  ..name = 'Female'
                  ..value = 'female'
                ]            
                ..templateOptions = (FormlyTemplateOptions()
                ..label = 'Label comes here'
                // ..hint = 'Check box hin'
                ..icon = Icon(Icons.label)
                ),
                FieldConfig()
                  ..key = 'select'
                  ..type = 'select'
                  ..onChange = print
                  ..defaultValue = 'female'
                  ..options = [
                    SelectOption()
                      ..name = 'Male'
                      ..value = 'male',
                    SelectOption()
                      ..name = 'Female'
                      ..value = 'female'
                  ]
                  ..templateOptions = (FormlyTemplateOptions()
                    ..label = 'Label comes here'
                  // ..hint = 'Check box hin'
                    ..icon = Icon(Icons.label)
                  ),
                FieldConfig()
                  ..key = 'date'
                  ..type = 'date'
                  ..onChange = print
                  ..templateOptions = (FormlyTemplateOptions()
                    ..label = 'Date'
                  // ..hint = 'Check box hin'
                    ..icon = Icon(Icons.label)
                  ),
                FieldConfig()
                  ..key = 'datetime'
                  ..type = 'datetime'
                  ..onChange = print
                  ..templateOptions = (FormlyTemplateOptions()
                    ..label = 'Date and Time'
                  // ..hint = 'Check box hin'
                    ..icon = Icon(Icons.label)
                  ),
                FieldConfig()
                  ..key = 'switch'
                  ..type = 'switch'
                  ..onChange = print
                  ..templateOptions = (FormlyTemplateOptions()
                    ..label = 'Switch'
                  // ..hint = 'Check box hin'
                    ..icon = Icon(Icons.label)
                  ),
                FieldConfig()
                  ..key = 'check'
                  ..type = 'checkbox'
                  ..onChange = print
                  ..templateOptions = (FormlyTemplateOptions()
                    ..label = 'Switch'
                  // ..hint = 'Check box hin'
                    ..icon = Icon(Icons.label)
                  ),
            ];
        }

        @override
        Widget build(BuildContext context) {
        return Scaffold(     
          body: Container(
            child: FormlyForm(
              fields: createFields(),
              model: {},
              onChange: print,
            ),
          )      
        );
      }
    }

Create a Formly Form with bloc #

There are times when you want to validate a form on submittion and/or want to observe change reactively using streams or rxDart subject, you may consider more advanced implementation of the same form like below:

class Demo extends StatefulWidget {
  final Widget child;

  Demo({Key key, this.child}) : super(key: key);

  _DemoState createState() => _DemoState();
}
class DemoState extends State<Demo> {
    var _lights = false;
    FormlyBloc bloc;
    _DemoState() {
        bloc = new FormlyBloc({}, createFields());
    }
    //... implementation of createFields ommited here...
    @override
    Widget build(BuildContext context) {
    return Scaffold(     
      body: Column(
        children: <Widget>[
          Container(
            child: FormlyForm(
              bloc: bloc,          
              onChange: print,
            ),
          ),
          MaterialButton(
            child: Text('Submit'),
            onPressed: () async {
              if(await bloc.validateForm()) {
                // Form valid here
                print(bloc.modelValue);
              }
              // else errors will show.
            },
          )
        ],
      )      
    );
  }
}

0.1.0 #

  • As of this version, I have added the basic input fields with basic validation support.

0.1.1 #

  • Fixed a bug in async validation.

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_formly: ^0.1.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:flutter_formly/flutter_formly.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
96
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
60
Overall:
Weighted score of the above. [more]
41
Learn more about scoring.

We analyzed this package on Aug 18, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-0.25 points)

229 out of 235 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Fix lib/formly/formly_fields/utils/datetimetomap.dart. (-1 points)

Analysis of lib/formly/formly_fields/utils/datetimetomap.dart reported 2 hints:

line 3 col 10: The function '_fromJsonToDateTime' isn't used.

line 13 col 18: Name non-constant identifiers using lowerCamelCase.

Fix lib/formly/bloc/formly_provider.dart. (-0.50 points)

Analysis of lib/formly/bloc/formly_provider.dart reported 1 hint:

line 11 col 10: This function has a return type of 'FormlyBloc', but doesn't end with a return statement.

Fix lib/formly/formly_fields/formlyCheckbox_field.dart. (-0.50 points)

Analysis of lib/formly/formly_fields/formlyCheckbox_field.dart reported 1 hint:

line 4 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: FormlyCheckboxFormField._value

Fix additional 16 files with analysis or formatting issues. (-1.50 points)

Additional issues in the following files:

  • lib/formly/formly_fields/formlyRadioGroup_field.dart (1 hint)
  • lib/formly/formly_fields/formlySelect_field.dart (1 hint)
  • lib/formly/formly_fields/formlySwitch_field.dart (1 hint)
  • lib/flutter_formly.dart (Run flutter format to format lib/flutter_formly.dart.)
  • lib/formly/bloc/field_bloc.dart (Run flutter format to format lib/formly/bloc/field_bloc.dart.)
  • lib/formly/bloc/formly_bloc.dart (Run flutter format to format lib/formly/bloc/formly_bloc.dart.)
  • lib/formly/bloc/formly_events.dart (Run flutter format to format lib/formly/bloc/formly_events.dart.)
  • lib/formly/bloc/formly_validators.dart (Run flutter format to format lib/formly/bloc/formly_validators.dart.)
  • lib/formly/formly.dart (Run flutter format to format lib/formly/formly.dart.)
  • lib/formly/formly_base.dart (Run flutter format to format lib/formly/formly_base.dart.)
  • lib/formly/formly_fields/formlyDate_field.dart (Run flutter format to format lib/formly/formly_fields/formlyDate_field.dart.)
  • lib/formly/formly_fields/formlyDatetime_field.dart (Run flutter format to format lib/formly/formly_fields/formlyDatetime_field.dart.)
  • lib/formly/formly_fields/formlyFieldGroup.dart (Run flutter format to format lib/formly/formly_fields/formlyFieldGroup.dart.)
  • lib/formly/formly_fields/formlyInput_field.dart (Run flutter format to format lib/formly/formly_fields/formlyInput_field.dart.)
  • lib/formly/formly_models.dart (Run flutter format to format lib/formly/formly_models.dart.)
  • lib/formly/formly_widget.dart (Run flutter format to format lib/formly/formly_widget.dart.)

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (rxdart).

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and flutter_formly.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
flutter_redux ^0.5.0 0.5.3
intl ^0.15.7 0.15.8
rxdart ^0.20.0 0.20.0 0.22.1+1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.6 1.1.7
path 1.6.4
redux 3.0.0
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test