form_page_view 0.2.4 copy "form_page_view: ^0.2.4" to clipboard
form_page_view: ^0.2.4 copied to clipboard

A Flutter package for creating a page view form with progress bar.

Form Page View #

Form Page View is a Flutter package that allows you to create a form with a page view and a progress bar. This package makes it easy to create interactive and customizable forms with seamless navigation between pages.

Demo #

Circular indicator Linear indicator
Example screenshot Example screenshot
Example screenshot Example screenshot

Platforms supported #

Android iOS Web MacOS Windows Linux

Features #

  • Create a form with a page view and a progress bar
  • Navigate between pages using the progress bar or the back button
  • Customize the appearance of the form
  • Customize the progress indicator
  • Customize the button widget

Installation #

Add the following dependency to your pubspec.yaml file:

dependencies:
  form_page_view: ^1.0.0

Import the package in your Dart file:

import 'package:form_page_view/form_page_view.dart';

Usage #

Create a list of page models ('FormPageModel') to define the pages in your form. Each page model should contain a 'formKey' for form validation and a 'form' that represents the page content.

final List<FormPageModel> pages = [
  FormPageModel(
    formKey: GlobalKey<FormState>(),
    body: YourFormWidget(),
    title: 'Page 1',
    textButton: 'Next',
  ),
  // Add other page models here
];

Next, create a PageController to control the navigation between pages:

final PageController _pageController = PageController();

Use the 'FormPageView' widget by providing it with the pages, the function to execute when the form is submitted, and other optional parameters to customize the appearance and behavior of the form:

FormPageView(
  progress: ProgressIndicatorType.linear,
  pages: pages,
  onFormSubmitted: () {
    // Function to execute when the form is submitted
  },
  controller: _pageController,
),

Refer to the provided usage 'examples' in the example folder for more details.

Properties #

Property Type Description
progress ProgressIndicatorType? Optional. Specifies the type of progress indicator to use. Default is ProgressIndicatorType.linear.
pages List<PageModel> Required. The list of page models that define the pages in the form.
onFormSubmitted Function() Required. The function to execute when the form is submitted.
controller PageController Required. The page controller for controlling the navigation in the pages.
contentPadding EdgeInsetsGeometry? Optional. The padding of the content of the form pages. Default is EdgeInsets.all(16).
buttonPadding EdgeInsetsGeometry? Optional. The padding of the page navigation button. Default is EdgeInsets.all(16).
progressPadding EdgeInsetsGeometry? Optional. The padding of the progress indicator. Default is EdgeInsets.all(8.0).
style FormPageStyle? Optional. A FormPageStyle object to customize the appearance and behavior of the form.

Customization #

Form widget #

You can customize the form widget by providing the following parameters:

  • 'contentPadding': The padding of the content of the form pages. Default is EdgeInsets.all(16).
  • 'buttonPadding': The padding of the page navigation button. Default is EdgeInsets.all(16).
  • 'progressPadding': The padding of the progress indicator. Default is EdgeInsets.all(8.0).
  • 'style': A FormPageStyle object to customize the appearance and behavior of the form.

Form Page Style #

You can customize the form page style by providing a 'FormPageStyle' object to the 'style' parameter. The following parameters are available:

  • 'backgroundColor': The background color of the form pages. Default is Colors.white.

App bar

You can customize the app bar by providing the following parameters:

  • 'appBarCenterTitle': Specifies whether to center the title on the app bar. Default is false.
  • 'appBarElevation': The elevation of the app bar. Default is 4.0.
  • 'appBarBackgroundColor': The background color of the app bar. Default is Colors.white.
  • 'appBarHeight': The height of the app bar. Default is 56.0.
  • 'appBarTextStyle': The text style of the app bar title. Default is TextStyle(color: Colors.black).

Progress indicator

You can customize the progress indicator by providing the following parameters:

  • 'progressIndicatorColor': The color of the progress indicator. Default is Colors.blue.
  • 'progressIndicatorBackgroundColor': The background color of the progress indicator. Default is Colors.grey.
  • 'progressIndicatorSize': The size of the progress indicator. Default is 48.0.
  • 'progressIndicatorStrokeWidth': The stroke width of the progress indicator. Default is 4.0.

Button widget

You can customize the button widget by providing the following parameters:

  • 'buttonStyle': The style of the page navigation button. Default is ElevatedButton.styleFrom(primary: Colors.blue).
  • 'buttonHeight': The height of the page navigation button. Default is 48.
  • 'buttonWidth': The width of the page navigation button. Default is double.infinity.
  • 'buttonTextStyle': The text style of the page navigation button. Default is TextStyle(color: Colors.white).
  • 'backButtonIcon': The icon of the back button. Default is Icons.arrow_back.

Authors #

9
likes
140
pub points
55%
popularity

Publisher

unverified uploader

A Flutter package for creating a page view form with progress bar.

Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on form_page_view