GitLocker: The Coding Marketplace

Description:

dynamic multi step form

# Dynamic Multi Step Form
copied to clipboard
Most of the time, filling out forms with lots of fields can be cumbersome, and this can discourage
users from completing the process. This is where a multi-step form comes into play. Multi-step forms
are just as the name implies: a multi-step form is a long form broken down into short pieces. They
provide a less daunting experience to the users of your application.
This flutter package renders a dynamic multi step form with different input fields and step
indicator. Step indicator helps to display on which step you are at the moment. Form fields, field
level validations and design elements are managed via JSON, this JSON can store on the server and
call through api or it can store in app code as well. This plugin supports both iOS and Android.

Android
iOS

Support
SDK 21+
10.0+

Dynamic Multi Step Form Implementation Guide #
Features #
Use this plugin in your Flutter app to:

To manage dynamic multi step from with different fields from server according to field type.
Auto manage field validation according to field type.
Easy to manage field decoration by developers.

Getting started #
This plugin relies on the flutter core.
Usage #
To use the plugin you just need to add dynamic_multi_step_form: ^1.1.5 into your pubspec.yaml file
and run pub get.
Add following into your package's pubspec.yaml (and run an implicit dart pub get): #
dynamic_multi_step_form: ^1.1.5
Multi Step Form UI Sample #

Credit for sample UI: https://dribbble.com/shots/16885694-Upload-KYC-screens
Add below in Info.plist file #
Add below line for QR scanner field

Example #
Column(
children: [
Expanded(
// Add jsonString from example assets file or json encoded String.
child: DynamicForm(jsonString, dynamicFormKey: _formKeyNew,
finalSubmitCallBack:
(int currentPage, Map<String, dynamic> data) async {
//Get all entered information on final or last form submit and redirect to another scree to display entered information
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(data: data)),
);
}, currentStepCallBack: (
{int? currentIndex,
Map<String, dynamic>? formSubmitData,
Map<String, dynamic>? formInformation}) {
//This function return value when any current form submit and validated.
setState(() {
//Here currentIndex is a current displayed step index. its default value is zero.
currentPageIndex = currentIndex!;
});
})),
// Custom user buttons to move on next step or submit current form details
Container(
color: Colors.white,
padding:
EdgeInsets.symmetric(horizontal: 15).copyWith(bottom: 8),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
backgroundColor: Colors.black,
maximumSize: Size(MediaQuery.of(context).size.width, 45),
minimumSize: Size(MediaQuery.of(context).size.width, 45),
),
clipBehavior: Clip.hardEdge,
onPressed: () async {
//Call next step function to validate form and move next step of form
_formKeyNew.currentState!.nextStepCustomClick();
},
child: const Text('Next'),
),
)
],
)
copied to clipboard
Changelog #
All notable changes to this project will be documented in this file.
Issues #
To report your issues, submit them directly in
the Issues section.
License #
this file.