form_bloc icon indicating copy to clipboard operation
form_bloc copied to clipboard

What type of field bloc do you think is missing?

Open GiancarloCode opened this issue 4 years ago • 20 comments

In form_bloc 0.12.x we have:

  • TextFieldBloc<ExtraData>: field for String values
    • TextField
  • BooleanFieldBloc<ExtraData>: field for Boolean values
    • CheckBox
    • Switch
  • InputFieldBloc<Value, ExtraData>: generic field, supports any type, for example date or files.
    • DateTimePicker
    • ImagePicker
    • FilePicker
  • SelectFieldBloc<Value, ExtraData>: lets you select 1 item from a List.
    • Dropdown
    • RadioButtonGroup
  • MultiSelectFieldBloc<Value, ExtraData>: Lets you select N items from a List.
    • CheckBoxGroup
  • ListFieldBloc<FieldBloc>: A list of any type of fields, allowing you to add and remove fields.
    • ListView
  • GroupFieldBloc: A field made up of other fields to be used within a ListField.

GiancarloCode avatar Apr 15 '20 06:04 GiancarloCode

Hellothank you a lot for your work i suggest a SelectFieldBloc with search and ley/value items

devZakariya avatar Apr 15 '20 09:04 devZakariya

@devZak Hi thanks What would be the use case? In the SelectFieldBloc you can set any type, key-values (better Tuple), models, etc.

SelectFieldBloc<User, ExtraData>
SelectFieldBloc<Tuple2, ExtraData>

GiancarloCode avatar Apr 15 '20 09:04 GiancarloCode

oh really i didn't know that @GiancarloCode Thank youuu

devZakariya avatar Apr 15 '20 10:04 devZakariya

I stall some names from flutter_form_builder :-)

ColorPicker - For Color input selection RangeSlider - Used to select a range from a range of values Rate - For selection of a numerical value as a rating SegmentedControl - For selection of a value from the CupertinoSegmentedControl as an input SignaturePad - Presents a drawing pad on which user can doodle Slider - For selection of a numerical value on a slider Switch - On/Off switch TouchSpin - Selection of a number by tapping on a plus or minus icon

vasilich6107 avatar Apr 15 '20 15:04 vasilich6107

@vasilich6107 Regarding widgets, it would be good if they were shorter, but it would generate conflicts with the names of the Material library. sample TextField, CheckBox, Slider, Switch,

Maybe we can find a shorter naming convention for widgets


Ideally the states name should also be without the word Bloc, but it has the same problem, collides with Flutter's FormState. Currently:

  • FormBloc => FormBlocState

Expected:

  • FormBloc => FormState

Maybe I am omitting something, I think if it collides, show / hide should be used in imports and it would be very annoying.

GiancarloCode avatar Apr 15 '20 15:04 GiancarloCode

The naming could be any)

vasilich6107 avatar Apr 15 '20 16:04 vasilich6107

one important field that is missing is when user tap on a textfield and a user define custom dialog box popups requesting user to select a value from a list. when the user select a value, the textfield should be set to that value. I thought that InputFieldBloc should do it but i get errors.

here is an example. see image attached. user tap/click on the textfield or a icon. textfield

a custom pop dialog box popsup with a list of item to select. user select an item and textfield is set to that value poplist

i tried InputFieldBloc like this final description2 = InputFieldBloc<String, Object>(); then i try assigning this to a textfield

` TextFieldBlocBuilder(

                   **textFieldBloc: loginFormBloc.description2,**  
                   decoration: InputDecoration(
                    labelText: 'Description',
                    prefixIcon: Icon(Icons.note),
                  ),
                ),

` i get error in textFieldBloc: loginFormBloc.description2 that said i cannot assign inputfieldbloc to a textfieldbloc. so i am guessing inputfield cannot be used. if InputField can be use for this type of scenerio, please let me know how. otherwise, it will be nice to have a field to handle this situation.

rodriger06 avatar Apr 19 '20 17:04 rodriger06

@rodriger06 If the items are of the same type (String), I think you could use the suggestions parameter of the textFieldBloc and use it in your dialog.

MyFormBloc(){
 ...
 textField.updareSugesstions((value) async => ['Suggest1', 'SuggestN']);
}
        TextFieldBloc(
           textFieldBloc: formBloc.textField,
           decoration: InputDecoration(
             labelText: 'Description',
             prefixIcon: IconButton(
                onPressed: () => AwesomeDialog.show(context, textFieldBloc);
                icon: Icon(Icons.note,
             ),
         ),

In the dialog access to suggestions

textField.state.suggestions

Here is an example of a select Changing the input decorator to a TextField would also work for you case https://github.com/GiancarloCode/form_bloc/issues/64#issuecomment-613836269


I am open to suggestions :)

GiancarloCode avatar Apr 19 '20 17:04 GiancarloCode

  • missing Native iPhone Style Date/Time picker widget
  • missing Hijri date option in existing Date picker

https://github.com/GiancarloCode/form_bloc/issues/108

moriswala avatar Jun 11 '20 14:06 moriswala

It needs a ChipInputBuilder!

coleweinman avatar Jun 13 '20 15:06 coleweinman

I think it needs more FieldBlocBuilders, FieldBlocs implemented in this package is sufficient IMO.

grinder15 avatar Jun 20 '20 03:06 grinder15

There should be one for phone numbers with country codes.

Reprevise avatar Jul 02 '20 14:07 Reprevise

Number field (textfield where the user can only put digits, shows a digit-only keyboard)

netantho avatar Jul 27 '20 11:07 netantho

Number field (textfield where the user can only put digits, shows a digit-only keyboard)

@netantho This should work for you.

child: TextFieldBlocBuilder(
    textFieldBloc: <your text field bloc>,
    keyboardType: TextInputType.number,
    inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
),

Reprevise avatar Jul 27 '20 11:07 Reprevise

ChipsInput - Takes a list of Chips as input and suggests more options on typing ChoiceChip - Creates a chip that acts like a radio button. ColorPicker - For Color input selection CountryPicker - Country selection from list FilterChip - Creates a chip that acts like a checkbox. ImagePicker - Picker a image from Gallery or Camera and stores it in a List of images, File or String. PhoneField - International phone number input. RangeSlider - Used to select a range from a range of values Rating - For selection of a numerical value as a rating SegmentedControl - For selection of a value from the CupertinoSegmentedControl as an input SignaturePad - Presents a drawing pad on which user can doodle Slider - For selection of a numerical value on a slider

alejandroaap avatar Jul 27 '20 11:07 alejandroaap

this is great for number only input. i am trying to find the same thing but i want to enter decimals. the above code ( inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],) is working for numbers only but not decimals. it will delete the period when entered into textfield as a decimal. is there a way to enter decimals or number only? example of values, 2.45 0.88 5560.3345 66 23

http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Virus-free. www.avg.com http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

On Mon, Jul 27, 2020 at 7:56 AM Benjamin [email protected] wrote:

Number field (textfield where the user can only put digits, shows a digit-only keyboard)

This should work for you.

child: TextFieldBlocBuilder( textFieldBloc: , keyboardType: TextInputType.number, inputFormatters: [WhitelistingTextInputFormatter.digitsOnly], ),

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GiancarloCode/form_bloc/issues/68#issuecomment-664352338, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALZUB33ZPU5QUT6GWR62PNTR5VTOZANCNFSM4MIJ724Q .

rodriger06 avatar Jul 27 '20 12:07 rodriger06

Number field (textfield where the user can only put digits, shows a digit-only keyboard)

@netantho This should work for you.

child: TextFieldBlocBuilder(
    textFieldBloc: <your text field bloc>,
    keyboardType: TextInputType.number,
    inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
),

@GiancarloCode I have a problem with this solution. I use the toJson() method of the form state to serialize the form. Then I use the json_serializable library to create a model object from the json. But the TextFieldBloc will always return a string, whereas json_serializable will expect an int for integer fields. So there should either be a way to overwrite the toJson method for TextFieldBloc (similar to InputFieldBloc) or a dedicated NumberFieldBloc as susggested by @netantho.

SebastianJL avatar Aug 10 '20 20:08 SebastianJL

Should it be the scope of this library though ? Wouldn't it be easier if you could easily plug in fields from other libraries ? After all you won't please everyone with your fields.

I have not yet used the library, I'm just checking if it would fit my needs as I have my own inputs.

cedvdb avatar Feb 04 '21 15:02 cedvdb

@cedvdb consider the fact that no one responds to issues, PRs... Take a look on reactive-forms

vasilich6107 avatar Feb 04 '21 22:02 vasilich6107

@cedvdb consider the fact that no one responds to issues, PRs... Take a look on reactive-forms

yeah that's what I picked in the end

cedvdb avatar Feb 05 '21 15:02 cedvdb