From 4fd5122080c4cb44006100e2421689873ee9386a Mon Sep 17 00:00:00 2001 From: Jacques Doeleman Date: Mon, 3 Oct 2022 08:42:25 +0200 Subject: [PATCH 1/6] Ability to set scroll direction Default set to horizontal --- lib/src/form.dart | 4 ++++ lib/utils/form.dart | 2 ++ 2 files changed, 6 insertions(+) diff --git a/lib/src/form.dart b/lib/src/form.dart index bcefc97..2eb68fc 100644 --- a/lib/src/form.dart +++ b/lib/src/form.dart @@ -229,6 +229,7 @@ class _FlutterFormState extends ConsumerState { return Stack( children: [ PageView( + scrollDirection: _formController._options.scrollDirection, controller: _formController.getPageController(), physics: const NeverScrollableScrollPhysics(), children: [ @@ -504,6 +505,9 @@ class FlutterFormController extends ChangeNotifier { } Future nextStep() async { + _options.onNext( + _currentStep, _formPageControllers[_currentStep].getAllValues()); + _currentStep += 1; if (_currentStep >= _options.pages.length && _options.checkPage != null) { diff --git a/lib/utils/form.dart b/lib/utils/form.dart index 01dc684..0d65b7c 100644 --- a/lib/utils/form.dart +++ b/lib/utils/form.dart @@ -23,6 +23,7 @@ class FlutterFormOptions { backButton; final void Function(Map>) onFinished; final void Function(int pageNumber, Map) onNext; + final Axis scrollDirection; const FlutterFormOptions({ required this.pages, @@ -31,6 +32,7 @@ class FlutterFormOptions { this.backButton, required this.onFinished, required this.onNext, + this.scrollDirection = Axis.horizontal, }); } From 503a96541287bab482baa1aab2ade7939e59e60b Mon Sep 17 00:00:00 2001 From: Jacques Doeleman Date: Tue, 11 Oct 2022 13:37:57 +0200 Subject: [PATCH 2/6] Changed the scrollphysics --- lib/src/form.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/form.dart b/lib/src/form.dart index 2eb68fc..5ad3ff1 100644 --- a/lib/src/form.dart +++ b/lib/src/form.dart @@ -239,6 +239,7 @@ class _FlutterFormState extends ConsumerState { child: fs.FormState( formController: _formController.getFormPageControllers()[i], child: CustomScrollView( + physics: const ClampingScrollPhysics(), slivers: [ SliverFillRemaining( hasScrollBody: false, @@ -256,6 +257,7 @@ class _FlutterFormState extends ConsumerState { widget.options.checkPage!.title!, Expanded( child: CustomScrollView( + physics: const ClampingScrollPhysics(), slivers: [ SliverFillRemaining( hasScrollBody: false, From 1821e8ca112f67acad4a2b05e9562ce8f772ec7a Mon Sep 17 00:00:00 2001 From: Jacques Doeleman Date: Tue, 11 Oct 2022 13:40:13 +0200 Subject: [PATCH 3/6] Changed docs for scrolldirection --- lib/utils/form.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/utils/form.dart b/lib/utils/form.dart index 0d65b7c..64620dd 100644 --- a/lib/utils/form.dart +++ b/lib/utils/form.dart @@ -14,6 +14,8 @@ import 'package:flutter/material.dart'; /// [onFinished] and [onNext] are both callbacks which give the users results. /// [onNext] is called when the user goes to the next page. /// [onFinished] is called when the form is finished. When checkpage is set [onFinished] is called when the checkpage is finished. +/// +/// [scrollDirection] can be set to change the Axis on which the pageview slides. Defaults to horizontal. class FlutterFormOptions { final List pages; From b17d386ff16c8a3e809a8e8494d21ba48168592e Mon Sep 17 00:00:00 2001 From: Jacques Doeleman Date: Tue, 11 Oct 2022 16:12:48 +0200 Subject: [PATCH 4/6] Added a multi line plain text field --- .../input/input_types/input_plain_text.dart | 58 ++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/lib/src/widgets/input/input_types/input_plain_text.dart b/lib/src/widgets/input/input_types/input_plain_text.dart index a8d44f3..c37bbb2 100644 --- a/lib/src/widgets/input/input_types/input_plain_text.dart +++ b/lib/src/widgets/input/input_types/input_plain_text.dart @@ -32,7 +32,7 @@ class FlutterFormInputPlainText extends FlutterFormInputWidget { } } -/// Input for an plain text with extra styling used in a [FlutterForm]. +/// Input for a plain text with extra styling used in a [FlutterForm]. /// /// Standard controller is [FlutterFormInputPlainTextController]. class FlutterFormInputPlainTextWhiteWithBorder extends FlutterFormInputWidget { @@ -73,6 +73,62 @@ class FlutterFormInputPlainTextWhiteWithBorder extends FlutterFormInputWidget { } } +/// Input for a multi line plain text field [FlutterForm]. +/// +/// Standard controller is [FlutterFormInputPlainTextController]. +/// +/// Hint can be set to set a hint inside the field. +/// +/// MaxCharacters can be set to set a maximum amount of characters. +class FlutterFormInputMultiLine extends FlutterFormInputWidget { + const FlutterFormInputMultiLine({ + Key? key, + required FlutterFormInputController controller, + Widget? label, + this.hint, + this.maxCharacters, + }) : super(key: key, controller: controller, label: label); + + final String? hint; + final int? maxCharacters; + + @override + Widget build(BuildContext context, WidgetRef ref) { + String Function(String, {List? params}) _ = + getTranslator(context, ref); + + super.registerController(context); + + return Column( + children: [ + Expanded( + child: TextFormField( + textAlignVertical: TextAlignVertical.top, + expands: true, + maxLines: null, + maxLength: maxCharacters, + initialValue: controller.value, + onSaved: (value) => controller.onSaved(value), + validator: (value) => controller.onValidate(value, _), + decoration: InputDecoration( + hintText: hint, + floatingLabelBehavior: FloatingLabelBehavior.never, + isDense: true, + border: const OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFF979797)), + ), + focusedBorder: const OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFF979797)), + ), + filled: true, + ), + ), + ), + ], + ); + } +} + /// Controller for plain text used by a [FlutterFormInputWidget] used in a [FlutterForm]. /// /// Mainly used by [FlutterFormInputPlainText]. From c00dba357e96b22ddda64ec251c4c038b9c27148 Mon Sep 17 00:00:00 2001 From: Jacques Doeleman Date: Tue, 11 Oct 2022 16:35:47 +0200 Subject: [PATCH 5/6] Added the ability to change the scroll physics of the pages' scrollview Updated readme and changelog --- CHANGELOG.md | 6 ++++++ README.md | 16 +++++++++------- lib/src/form.dart | 6 ++++-- lib/utils/form.dart | 4 ++++ 4 files changed, 23 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d7a448f..70a6ea9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ ## 0.0.1 - September 29th 2022 - Initial release + +## 0.0.2 - October 12th 2022 + +- Added a multi line plain text input widget +- Ability to set the scrolldirection of the pageview +- Ability to set the scrollphysics of the pages' scrollview. diff --git a/README.md b/README.md index 325c1fa..0c102f1 100644 --- a/README.md +++ b/README.md @@ -24,13 +24,15 @@ Flutter Form has two paramaters: options and formController. Each of these param Options: -| Parameter | Explaination | -| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| checkPage | If this is set the form will feature a checkpage at the end so the end user can verify and alter his answers. | -| nextButton | The button which is put in the stack of the Form. An onTap has to be implemented and should call to the FormController. Standard call is autoNextStep(). | -| backButton | Same as the nextButton. A widget that is put in the stack of the Form. An onTap has to be implemented and should call to the FormController. Standard call is previousStep(). | -| onFinised | The callback that will be called when the last page is finished. If checkPage is enabled this will call after the checkPage is passed. | -| onNext | The callback that is called when the user finishes a page. PageNumber is also provided. | +| Parameter | Explaination | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| checkPage | If this is set the form will feature a checkpage at the end so the end user can verify and alter his answers. | +| nextButton | The button which is put in the stack of the Form. An onTap has to be implemented and should call to the FormController. Standard call is autoNextStep(). | +| backButton | Same as the nextButton. A widget that is put in the stack of the Form. An onTap has to be implemented and should call to the FormController. Standard call is previousStep(). | +| onFinised | The callback that will be called when the last page is finished. If checkPage is enabled this will call after the checkPage is passed. | +| onNext | The callback that is called when the user finishes a page. PageNumber is also provided. | +| scrollDirection | The abilty to set the scroll direction of the forms .pageview | +| scrollPhysics | The ability to set the scroll physics of scroll views in each form page. | FormController: diff --git a/lib/src/form.dart b/lib/src/form.dart index 5ad3ff1..faceaa6 100644 --- a/lib/src/form.dart +++ b/lib/src/form.dart @@ -239,7 +239,8 @@ class _FlutterFormState extends ConsumerState { child: fs.FormState( formController: _formController.getFormPageControllers()[i], child: CustomScrollView( - physics: const ClampingScrollPhysics(), + physics: _formController._options.scrollPhysics ?? + const ClampingScrollPhysics(), slivers: [ SliverFillRemaining( hasScrollBody: false, @@ -257,7 +258,8 @@ class _FlutterFormState extends ConsumerState { widget.options.checkPage!.title!, Expanded( child: CustomScrollView( - physics: const ClampingScrollPhysics(), + physics: _formController._options.scrollPhysics ?? + const ClampingScrollPhysics(), slivers: [ SliverFillRemaining( hasScrollBody: false, diff --git a/lib/utils/form.dart b/lib/utils/form.dart index 64620dd..f186237 100644 --- a/lib/utils/form.dart +++ b/lib/utils/form.dart @@ -16,6 +16,8 @@ import 'package:flutter/material.dart'; /// [onFinished] is called when the form is finished. When checkpage is set [onFinished] is called when the checkpage is finished. /// /// [scrollDirection] can be set to change the Axis on which the pageview slides. Defaults to horizontal. +/// +/// [scrollPhysics] can be set to set the scroll phyisics of the scroll views in each page. Default to [ClampingScrollPhysics]. class FlutterFormOptions { final List pages; @@ -26,6 +28,7 @@ class FlutterFormOptions { final void Function(Map>) onFinished; final void Function(int pageNumber, Map) onNext; final Axis scrollDirection; + final ScrollPhysics? scrollPhysics; const FlutterFormOptions({ required this.pages, @@ -35,6 +38,7 @@ class FlutterFormOptions { required this.onFinished, required this.onNext, this.scrollDirection = Axis.horizontal, + this.scrollPhysics, }); } From c9034a723bddb40d92b501bf13dbea4eda7f157b Mon Sep 17 00:00:00 2001 From: Jacques Doeleman Date: Wed, 12 Oct 2022 12:17:09 +0200 Subject: [PATCH 6/6] Multi line input now uses the standard plain text input --- .../input/input_types/input_plain_text.dart | 92 +++++++------------ 1 file changed, 33 insertions(+), 59 deletions(-) diff --git a/lib/src/widgets/input/input_types/input_plain_text.dart b/lib/src/widgets/input/input_types/input_plain_text.dart index c37bbb2..f9d57bd 100644 --- a/lib/src/widgets/input/input_types/input_plain_text.dart +++ b/lib/src/widgets/input/input_types/input_plain_text.dart @@ -12,8 +12,19 @@ class FlutterFormInputPlainText extends FlutterFormInputWidget { Key? key, required FlutterFormInputController controller, Widget? label, + this.decoration, + this.textAlignVertical, + this.expands = false, + this.maxLines, + this.maxLength, }) : super(key: key, controller: controller, label: label); + final InputDecoration? decoration; + final TextAlignVertical? textAlignVertical; + final bool expands; + final int? maxLines; + final int? maxLength; + @override Widget build(BuildContext context, WidgetRef ref) { String Function(String, {List? params}) _ = @@ -21,54 +32,20 @@ class FlutterFormInputPlainText extends FlutterFormInputWidget { super.registerController(context); - return TextFormField( - initialValue: controller.value, - onSaved: (value) => controller.onSaved(value), - validator: (value) => controller.onValidate(value, _), - decoration: InputDecoration( - label: label ?? const Text("Plain text"), - ), - ); - } -} - -/// Input for a plain text with extra styling used in a [FlutterForm]. -/// -/// Standard controller is [FlutterFormInputPlainTextController]. -class FlutterFormInputPlainTextWhiteWithBorder extends FlutterFormInputWidget { - const FlutterFormInputPlainTextWhiteWithBorder({ - Key? key, - required FlutterFormInputController controller, - Widget? label, - this.hint, - }) : super(key: key, controller: controller, label: label); - - final String? hint; - - @override - Widget build(BuildContext context, WidgetRef ref) { - String Function(String, {List? params}) _ = - getTranslator(context, ref); - - super.registerController(context); + InputDecoration inputDecoration = decoration ?? + InputDecoration( + label: label ?? const Text("Plain text"), + ); return TextFormField( initialValue: controller.value, onSaved: (value) => controller.onSaved(value), validator: (value) => controller.onValidate(value, _), - decoration: InputDecoration( - hintText: hint, - floatingLabelBehavior: FloatingLabelBehavior.never, - isDense: true, - border: const OutlineInputBorder( - borderSide: BorderSide(color: Color(0xFF979797)), - ), - focusedBorder: const OutlineInputBorder( - borderSide: BorderSide(color: Color(0xFF979797)), - ), - fillColor: Colors.white, - filled: true, - ), + decoration: inputDecoration, + textAlignVertical: textAlignVertical, + expands: expands, + maxLines: maxLines, + maxLength: maxLength, ); } } @@ -76,40 +53,37 @@ class FlutterFormInputPlainTextWhiteWithBorder extends FlutterFormInputWidget { /// Input for a multi line plain text field [FlutterForm]. /// /// Standard controller is [FlutterFormInputPlainTextController]. -/// +/// /// Hint can be set to set a hint inside the field. -/// +/// /// MaxCharacters can be set to set a maximum amount of characters. -class FlutterFormInputMultiLine extends FlutterFormInputWidget { +class FlutterFormInputMultiLine extends StatelessWidget { const FlutterFormInputMultiLine({ Key? key, - required FlutterFormInputController controller, - Widget? label, + required this.controller, + this.label, this.hint, this.maxCharacters, - }) : super(key: key, controller: controller, label: label); + }) : super(key: key); + + final FlutterFormInputController controller; + final Widget? label; final String? hint; final int? maxCharacters; @override - Widget build(BuildContext context, WidgetRef ref) { - String Function(String, {List? params}) _ = - getTranslator(context, ref); - - super.registerController(context); - + Widget build(BuildContext context) { return Column( children: [ Expanded( - child: TextFormField( + child: FlutterFormInputPlainText( + label: label, + controller: controller, textAlignVertical: TextAlignVertical.top, expands: true, maxLines: null, maxLength: maxCharacters, - initialValue: controller.value, - onSaved: (value) => controller.onSaved(value), - validator: (value) => controller.onValidate(value, _), decoration: InputDecoration( hintText: hint, floatingLabelBehavior: FloatingLabelBehavior.never,