flutter-form-builder-ecosystem / flutter_form_builder Goto Github PK

When i try to buld apk, i got this error
and I'm not using Chips Input.

flutter --version
Flutter 1.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5391447fae (3 months ago) • 2018-11-29 19:41:26 -0800
Engine • revision 7375a0f414
Tools • Dart 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

command: flutter build apk --release
Compiler message: file:///Volumes/files/daniel/.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.1.0/lib/src/chips_input.dart:293:29: Error: Type 'RawFloatingCursorPoint' not found. void updateFloatingCursor(RawFloatingCursorPoint point) { ^^^^^^^^^^^^^^^^^^^^^^ file:///Volumes/files/daniel/.pub-cache/hosted/pub.dartlang.org/flutter_chips_input-1.1.0/lib/src/chips_input.dart:293:29: Error: 'RawFloatingCursorPoint' isn't a type. void updateFloatingCursor(RawFloatingCursorPoint point) { ^^^^^^^^^^^^^^^^^^^^^^ Compiler terminated unexpectedly.

Hi @danvick,

Do you plan to implement an "onChanged" event on each inputs (FormBuilderDateTimePicker, FormBuilderSegmentedControl, ..) ? I would like to do an action when the user change only one element in the form.

I would like to avoid to handle the general onChanged (Map<String, dynamic>) in the FormBuilder.

Thanks a lot for the new beta version, it seems less buggy :)

As of now, the error message is creating automatically with attribute value, but it should be customizible in some cases we need to show error message differently.

I'm on 1.4.0 on Android. Once I select the Date of Birth, it displays momentarily until the keyboard comes up and then the date vanishes. Similar issue with the Appointment Time. Also getting the render issue below when the keyboard is active and Date or Time widget is displayed.

I/flutter (19904): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (19904): The following message was thrown during layout:
I/flutter (19904): A RenderFlex overflowed by 46 pixels on the right.
I/flutter (19904):
I/flutter (19904): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter (19904): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (19904): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (19904): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (19904): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (19904): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (19904): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (19904): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (19904): like a ListView.
I/flutter (19904): The specific RenderFlex in question is:
I/flutter (19904): RenderFlex#4ca06 relayoutBoundary=up4 OVERFLOWING
I/flutter (19904): creator: Row ← Padding ← ButtonBar ← ButtonTheme ← Column ← DecoratedBox ← Container ← Flexible ←
I/flutter (19904): Row ← SizedBox ← LayoutBuilder ← OrientationBuilder ← ⋯
I/flutter (19904): parentData: offset=Offset(4.0, 8.0) (can use size)
I/flutter (19904): constraints: BoxConstraints(0.0<=w<=104.0, 0.0<=h<=Infinity)
I/flutter (19904): size: Size(104.0, 48.0)
I/flutter (19904): direction: horizontal
I/flutter (19904): mainAxisAlignment: end
I/flutter (19904): mainAxisSize: max
I/flutter (19904): crossAxisAlignment: center
I/flutter (19904): textDirection: ltr
I/flutter (19904): verticalDirection: down

Can't render item from new item list using setState

Having this abstract "interface" that works with FormBuilder would allow to have custom UI for some form functions:

• map (as other issues mentioned)
• CC information (that interests me and I willing to help PR it)
• slider pickers, etc.
• would allow plugins with custom functionality.

I use the value of FormBuilderDropdown to add or remove rows when

flutter: Field with attribute 'attribute' already exists. Make sure that two or more fields don't have the
flutter: same attribute name.
flutter: 'package:flutter_form_builder/src/form_builder.dart': Failed assertion: line 64 pos 12:
flutter: '_fieldKeys.containsKey(attribute) == false'

How can I configure to add or delete rows?

`_formList.add(
FormBuilderDropdown(
attribute: "test",
decoration: InputDecoration(labelText: "test"),
items: _accountTypeOptionsList,
initialValue: _accountTypeOptionsList[0].value,
validators: [],
onChanged: (value) {

        _fbKey.currentState.reset();

        if (value == 0) {

          _formList.add(
            FormBuilderTextField(
              attribute: 'attribute',
              decoration: InputDecoration(
                labelText: 'test',
                hintText: 'test',
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(width: 0.2),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(width: 0.2, color: Common.themeColor()),
                ),
              ),
              validators: [],
            ),
          );
        }else {
          _formList.removeLast();
        }
        setState(() {

        });
        print(value);
      },
    )
);`

This is a customization request, not an issue.

Hi @danvick,

Is it possible to load initial values in the form only once instead of setting all field's "initialValue" manually ?

Maybe something like this :

_formBuilderKey.currentState.value = <String, dynamic>{ 'firstName': 'Initial value'};

Or in a new property (FormBuilder.initialValues for example).

Thanks a lot for your help and the latest improvements in the package !

Can this package and its dependencies be migrated to AndroidX please.
By the way form builder is a great idea for a package.
Thanks

Sometimes you need to disable certain fields based on other field's value.

Hi,

I'd like to display icons next to my form's input fields. Is this feature planned?

Thanks,
Jesse

There has been a new release of flutter_typeahead which has fixed a few bugs in the package. Please update to use the latest flutter_typeahead version as otherwise people who use the latest flutter_typeahead can't use the form builder package.

Many thanks.

Hi @danvick ,
After upgrading to version v2.0, my input fields keep loosing focus.

Below is not from my screen, but the problem is exactly the same.

Below is my code.

Hi @danvick ,

I try the new version of your package and with the given example at https://pub.dartlang.org/packages/flutter_form_builder/versions/3.0.0-beta.1#-readme-tab- , it doesn't compile :

Compiler message:
file:///C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_form_builder-3.0.0-beta.1/lib/src/inputs/form_builder_text_field.dart:127:7: Error: No named parameter with the name 'strutStyle'.
      strutStyle: widget.strutStyle,
      ^^^^^^^^^^
file:///C:/src/flutter/packages/flutter/lib/src/material/text_form_field.dart:73:3: Context: Found this candidate, but the arguments don't match.
  TextFormField({
  ^

Thanks a lot for your time !

Hi,
This is really a great library, thank you so much!
Can I have a request to separate the hint and helperText? For now, the hint will be set on helperText too, and it looks redundant from the screen.
Thanks in advance.

I just tried the example and noticed something..

When you post the form to the server ( or where ever) you have to do some server side validation for cross cutting edge cases & concerns.

• validate that any data referenced ( like an enum, KV value ) is still in the DB.
• any business logic checks.

SO what is probably also needed is a standard approach for showing Server side errors relating to a form.

1. If the error is unrelated to a specific form field ( like a business logic error), then show it at the bottom where the submit button is since that is where the user is visually in the scroll.

• This should be baked into the Submit Button Widget maybe. Up for debate..

2. If the error relates to one or more fields, then show the server side error against those fields.

• once the user has change those fields, the error goes away, allowing the user to try again.

I noticed you have support already for server side errors coming back, but no formal support for how to handle it.
So if we can bake this into the example if would be worthwhile.

Please ask if you have any questions as i have had to deal with this stuff quite a bit on many projects.

Can I request for a map input?
Thanks in advance.

wants to create read only text field

FormBuilderInput.textField(
      type: FormBuilderInput.TYPE_TEXT,
      attribute: "name",
      label: "Name",
      require: true,
      min: 3,
    ),

Now i am using validator option. where i check the original value of text field while submit form.

onChanged: () {
    print("Form Changed");
  },

to

onChanged: (currentFormData) {
    print(currentFormData);
  },

Thanks

Hi,
Can we have a loading or in progress indicator upon submit in case the long process at the back?
Thanks in advance.

At present, the controls property is typed as List<FormBuilderInput> instead of List<Widget>, so that we are unable to add Gap between forms, or inserting Sub headings or even custom desing like keeping two form fields in a row.

allow to add image picker... or document picker, would be very useful

If the form has a lot of fields, it will be nice to be able to group them logically and present them in labeled sections. For example: Personal Information Section has Name, Address etc., Company Information has Name of Company, Billing Address etc.,

When I slided the example slider in the example app, it did not work correctly. It didn't refresh current value of slider in ui. But it works correctly in onChanged and onSubmit events.

Hi @danvick ,

When we wrap any field with Row, it will hit the error:

HI I'm trying to use the date picker, even if I set the firstDate parameter I can't, go further Sun, Aug 4 1991 (up to sun may 6th 2046). I'm trying on Huawei and nexus 5 (through emulation) with the same results. Am I doing something wrong?

        FormBuilderInput.datePicker(
          label: "Date of Birth",
          firstDate: DateTime(1900),
          attribute: "dob",
        ),

Thank you for your time :)

controls: [
FormBuilderInput.typeAhead(
label: 'Team 1',
attribute: 'team1',
require: true,
//value: team1name,
itemBuilder: (context, team1) {
return ListTile(
title: Text(team1.name),
);
},
suggestionsCallback: (query) async {
BlocProvider.of(context).dataBloc.typeAheadQuery.add(query);
return await BlocProvider.of(context)
.dataBloc
.typeAheadValues
.last;
},
),
],

The suggestions appear fine in the type ahead field suggestion box, but when I click on one of the items in the list I get the following error and the value does not get set to the selected value.

flutter: ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
flutter: The following assertion was thrown while handling a gesture:
flutter: type '_$Entity' is not a subtype of type 'String'

Hi,

Do you plan to upgrade the package flutter_typeahead in flutter_form_builder ? Your package requires the version 0.5.1 while the version 1.2.1 is published.

Thanks a lot !

Hi @danvick,

I would like to arrange the widgets with Column and Row but there are a lot of exceptions thrown (RenderObject, RenderFlex, etc.). Could you please tell me how, for example, put two inputs in a Row ?

Here is an example :

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FormBuilderState> _fbKey = GlobalKey();

  var data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(child: _buildForm()),
    );
  }

  Widget _buildForm() {
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
      child: Column(
        children: <Widget>[
          FormBuilder(
            context,
            key: _fbKey,
            autovalidate: true,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    FormBuilderDateTimePicker(
                      attribute: 'begin_time',
                      inputType: InputType.time,
                      format: DateFormat("HH:mm"),
                      decoration: InputDecoration(labelText: "Start time"),
                    ),
                    FormBuilderDateTimePicker(
                      attribute: 'end_time',
                      inputType: InputType.time,
                      format: DateFormat("HH:mm"),
                      decoration: InputDecoration(labelText: "End time"),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Row(
            children: <Widget>[
              MaterialButton(
                child: Text("Submit"),
                onPressed: () {
                  _fbKey.currentState.save();
                  if (_fbKey.currentState.validate()) {
                    print(_fbKey.currentState.value);
                  }
                },
              ),
              MaterialButton(
                child: Text("Reset"),
                onPressed: () {
                  _fbKey.currentState.reset();
                },
              ),
            ],
          )
        ],
      ),
    );
  }
}

Thanks !

when reset button clicked, it hasn't reset all value in the chipsInput field. I think we need callback function when the reset button triggered manually.

Hi is there a Cupertino example?

Is it possible to trigger the save action from outside of the form? I would like to place a save button/icon on the App bar, but I am not sure how to trigger the form save.

Thanks in advance.

The default behavior is to inform the user that their inputs are invalid as soon as they begin entering their information. This means that every user will see that their email address is not valid until they have almost finished typing it all in. This is inappropriate -- the error should only show when they have finished imputing their information.

So can this default behavior be changed? Or how can I suppress the messages until I deem it is necessary?

Thanks for this great library!

I want to add some custom widgets inside FormBuilder, is it possible? How?

There is no way to change the field value once they are created, I have create a form with fields initially, then some user interaction will change the status, but all the fields remain the same regardless that I call setState(), in the build function I can see the status data have been changed.

Looking into source code, it looks like the field control state is not recreated and is associated with the attribute as key.

In the debugging app using hot reload, if i add new formbuilderinput then i reload app using hot reload, it's not working properly. Please fix this, cause this is slow down the time for developer.

I'm sorry my English is bad.

This is looking amazing. Great work !!

One thing i noticed is that on a large form ( like the example ) if you press submit at the bottom and there is an error, the user has to scroll up to find it.

It might be possible to scroll to the first error automatically ? No sure how flutter supports this. I know there was lots of talk about Tabbing through fields.
https://medium.com/flutterpub/flutter-keyboard-actions-and-next-focus-field-3260dc4c694

• looks like maybe it is fixed & supported now :)

Also on a Tablet, where the classic layout is the List on the left and the Form on the right, have to test the scroll to error also to make sure it works.

I've tried the simplest FormBuilder to read and write SharedPreferences.

TextFormField(initialValue: _name ) shows as it should

FormBuilderInput.textField(
type: FormBuilderInput.TYPE_TEXT,
attribute: "name",
value: _name,
label: "Name:",
)

Does not!

Hi,

I try to display the form after a Navigator.of(context).push but I encounter some issues.

With the typeAHead : the suggestions are not displayed while I write something in the textField (if the suggestion is finally displayed, the value is not set).

With the datePicker and timePicker : after choosing a date/time, the value is not correctly set.

Do you experience the same issues ? Or maybe is there something's else to do with the Navigator ?

Here is an example : https://gist.github.com/benoitverstraete/9bb9f23b91d35c4f69effc54ae8ff446

Thanks a lot !

Hi I checkout the master brand and it is successfully running in iPhone XR emulator. However I copy the sample code into one of my page, run it again, it crash.

I use redux to handle the data but I have removed all redux stuff from this page. This page is a pure clone from the sample page.

flutter: External FormValidation failed
[VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: setState() called after dispose(): _DateTimePickerTextFormFieldState#e142e(lifecycle state: defunct, not mounted)
This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback. The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().
#0 State.setState. (package:flutter/<…>
flutter: External FormValidation failed

Reloaded 6 of 943 libraries in 1,175ms.
flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building Builder(dirty):
flutter: Looking up a deactivated widget's ancestor is unsafe.
flutter: At this point the state of the widget's element tree is no longer stable. To safely refer to a
flutter: widget's ancestor in its dispose() method, save a reference to the ancestor by calling
flutter: inheritFromWidgetOfExactType() in the widget's didChangeDependencies() method.
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0 Element._debugCheckStateIsActiveForAncestorLookup. (package:flutter/src/widgets/framework.dart:3252:9)
flutter: #1 Element._debugCheckStateIsActiveForAncestorLookup (package:flutter/src/widgets/framework.dart:3261:6)
flutter: #2 Element.inheritFromWidgetOfExactType (package:flutter/src/widgets/framework.dart:3276:12)
flutter: #3 Theme.of (package:flutter/src/material/theme.dart:128:52)
flutter: #4 showDialog. (package:flutter/src/material/dialog.dart:705:37)
flutter: #5 _DialogRoute.buildPage (package:flutter/src/widgets/routes.dart:1484:14)
flutter: #6 _ModalScopeState.build. (package:flutter/src/widgets/routes.dart:655:43)
flutter: #7 Builder.build (package:flutter/src/widgets/basic.dart:6035:41)
flutter: #8 StatelessElement.build (package:flutter/src/widgets/framework.dart:3789:28)
flutter: #9 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3736:15)
flutter: #10 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
flutter: #11 StatelessElement.update (package:flutter/src/widgets/framework.dart:3796:5)
flutter: #12 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #13 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #14 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #15 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #16 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #17 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #18 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #19 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
flutter: #20 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
flutter: #21 StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #22 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #23 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #24 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #25 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
flutter: #26 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
flutter: #27 ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #28 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #29 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #30 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #31 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
flutter: #32 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
flutter: #33 StatefulElement.update (package:flutter/src/widgets/framework.dart:3894:5)
flutter: #34 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #35 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
flutter: #36 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
flutter: #37 StatelessElement.update (package:flutter/src/widgets/framework.dart:3796:5)
flutter: #38 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #39 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4883:14)
flutter: #40 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #41 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
flutter: #42 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
flutter: #43 ProxyElement.update (package:flutter/src/widgets/framework.dart:4006:5)
flutter: #44 Element.updateChild (package:flutter/src/widgets/framework.dart:2748:15)
flutter: #45 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3747:16)
flutter: #46 Element.rebuild (package:flutter/src/widgets/framework.dart:3559:5)
flutter: #47 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2273:33)
flutter: #48 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)
flutter: #49 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:268:5)
flutter: #50 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:988:15)
flutter: #51 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:928:9)
flutter: #52 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:840:5)
flutter: #56 _invoke (dart:ui/hooks.dart:209:10)
flutter: #57 _drawFrame (dart:ui/hooks.dart:168:3)
flutter: (elided 3 frames from package dart:async)
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════

Hi @danvick

Do you think it is possible to put camera/photo picker as part of your todo list?
For the time being, it would helping a lot if there is a custom input widget support, so we can handle any input which is not ready yet in the library.

Fyi, I am currently working on a forum/discussion like module, which camera/photo upload is one of the common feature.
The photo/image will be stored in Base64 string, so I guess that is how you could save the value. However, I am displaying the image with the URL reference.

Thank you!

Hi @danvick , does version 3 still support for custom validator?
Suppose I have a text field with some customize validation, can it still be done now?

Hi @danvick ,

Is it possible to make the formData as an option to external source, so we no need to explicitly set the value upon form saving.

Thanks in advance.

It a basic need for almost every password should have hide and show button with an eye icon. we have keep in flutter with stack widgets i think. i will try it meanwhile anybody can do a pull request.

This is an awesome package for speeding up mundane data pumping apps.

What's your thoughts on i18n ( language translation ) and i10n ( datatime, currency, etc ) formatting

I am using a pure JSON i18n approach which I a bit different from the standard approach so that the JSON files are more reusable.
Then using simple getText calls to get the translations.
If there is datatime or currency then I wrap the getText to also pass in the datetime or currency in, then get the translated text and then replace the datetime and currency with the real value formatted to the correct local.

I don't do any of the codegen of dart code to wrap the translation as I found it just does not properly support i10n use cases. Too many edge cases.

You still get type checking with getText because you can run a simple AST style checker to walk the dart code and check your keys are there in the JSON files for every language.

I am also not using dart to do the translation workflow.
Instead just use golang so it reusable I'm lots of things.
This is all used at design time.

Then just getText at runtime.

Thoughts ??? Useful for form builder ??

Hi,
With the autovalidate = false, the required error text will not disappear even after some text are entered. It will on be disappear after hitting the submit button. Can this be improved?
Thanks in advance.