Description
Is your feature request related to a problem? Please describe:
Yes, the current widget.Entry does not show the error messages, just notify to the user that there is an error. Current widget.Form only allows us to create 1 column form.
Is it possible to construct a solution with the existing API?
Yes, it is possible but there will be break changes (at least for the widget.Form, the other ones can be implemented as new widgets)
Describe the solution you'd like to see:
I have designed some apps with Flutter framework and I could say that its API is great. So maybe Fyne could adopt somethings from it. Based on it and to make things easier, the Entry widget could be redesign to this appearance:
fyne-textfield.mp4
And then create something like a widget.TextFormField that will add the label on the top of rectangle input as you can see in the video.
widget.Form could be completely redesign to accept variable columns.
This is how the above video was done:
input := driverservice.CreateInput{}
vtOpts := []string{"Motorcycle","Car"}
form := xwidget.Form{}
form.Inputs = []xwidget.FormInput{
xwidget.NewTextFormField("First name:", "", xwidget.InputFieldText).
SetValidator(xwidget.NewFormValidator().NotEmpty().Build()).
SetOnSaved(func(s string) { input.FirstName = s }),
xwidget.NewTextFormField("Last name:", "", xwidget.InputFieldText).
SetValidator(xwidget.NewFormValidator().NotEmpty().Build()).
SetOnSaved(func(s string) { input.LastName = s }),
xwidget.NewTextFormField("ID Card:", "", xwidget.InputFieldText).
SetValidator(xwidget.NewFormValidator().NotEmpty().Build()).
SetOnSaved(func(s string) { input.IDCard = s }),
xwidget.NewTextFormField("Driver License:", "", xwidget.InputFieldText).
SetValidator(xwidget.NewFormValidator().NotEmpty().Build()).
SetOnSaved(func(s string) { input.DriverLicense = s }),
xwidget.NewTextFormField("Email:", "", xwidget.InputFieldEmail).
SetValidator(xwidget.NewFormValidator().NotEmpty().Email().Build()).
SetOnSaved(func(s string) { input.Email = s }),
xwidget.NewTextFormField("Phone:", "", xwidget.InputFieldText).
SetValidator(xwidget.NewFormValidator().NotEmpty().Build()).
SetOnSaved(func(s string) { input.Phone = s }),
xwidget.NewDropdownFormField("Vehicle.Type:", vtOpts, vtOpts[0]).
SetOnSaved(func(s string) { input.Vehicle.Type = s }),
xwidget.NewTextFormField("Vehicle.Plate:", "", xwidget.InputFieldText).
SetValidator(xwidget.NewFormValidator().NotEmpty().Build()).
SetOnSaved(func(s string) { input.Vehicle.Plate = s }),
xwidget.NewTextFormField("Vehicle.Capacity:", "", xwidget.InputFieldInt).
SetValidator(xwidget.NewFormValidator().NotEmpty().Build()).
SetOnSaved(func(s string) { input.Vehicle.Capacity, _ = strconv.Atoi(s) }),
}
form.Divisor = layout.NewSpacer()
form.ButtonContainer = container.NewHBox(
widget.NewButton("Create", func() {
if !form.IsValid() {
return
}
form.Save()
// custom user logic
}),
widget.NewButton("Reset", form.Reset),
)
xcontainer.NewPadded(xcontainer.NewPaddingOpts(), form.Build(2))
Every TextFormField has an InputType that will prevent the user to enter letters when a number is expected (for example). It has a SetValidator function where we can add validators (FormValidator is a helper to add common validations). widget.Form will have three fields Inputs, Divisor and ButtonContainer, as you can see. Then we can user form.Build(cols) to create the form as fyne.CanvasObject by specifying the number of columns we want. form.IsValid() will trigger Validate() method on all the inputs and will return true or false to indicate if the form has errors or not. form.Save() will trigger the OnSaved callback that will have the inputs. form.Reset() will reset all inputs to its zero values (or the user initial ones??).
xcontainer.NewPadded is a new container too, that allows user to create custom paddings. By using just xcontainer.NewPaddingOpts() we are created a padding container just like the container.NewPadded, but you can add more options for example:
xcontainer.NewPadded(xcontainer.NewPaddingOpts().All(5, 0, 0, 0), title)
xcontainer.NewPadded(xcontainer.NewPaddingOpts().Symetric(10, 15), title)