FlutterForm class

A wrapper for flutters Form that can be controlled by a controller and provides multiple pre-defined input types/fields FlutterForm also provides multi page forms and a check page for validation.

A FlutterFormController has to be given to control what happens to values and pages within the FlutterForm.

FlutterFormOptions have to be provided to control the appearance of the form.

WARNING Define your FormInputController above your FlutterForm. Otherwise when rebuild the controller will differ from the registered ones.

FlutterFormInputEmailController emailController =
    FlutterFormInputEmailController(id: 'email');
FlutterFormInputPasswordController passwordController =
    FlutterFormInputPasswordController(id: 'password');

FlutterForm(
  formController: FlutterFormController,
  options: FlutterFormOptions(
    onFinished: (Map<int, Map<String, dynamic>> results) {
      // print(results);
    },
    onNext: (int pageNumber, Map<String, dynamic> results) {
      // print("Results page $pageNumber: $results");
    },
    nextButton: (int pageNumber, bool checkingPages) {
      return Align(
        alignment: Alignment.bottomCenter,
        child: Padding(
          padding: const EdgeInsets.only(
            bottom: 25,
          ),
          child: ElevatedButton(
            onPressed: () {
              FlutterFormController.autoNextStep();
            },
            child: Text(checkingPages ? "Save" : "Next Page"),
          ),
        ),
      );
    },
    backButton: (int pageNumber, bool checkingPages, int pageAmount) {
      if (pageNumber != 0) {
        if (!checkingPages || pageNumber >= pageAmount) {
          return Align(
            alignment: Alignment.topLeft,
            child: IconButton(
              padding: EdgeInsets.zero,
              splashRadius: 29,
              onPressed: () {
                FlutterFormController.previousStep();
              },
              icon: const Icon(Icons.chevron_left),
            ),
          );
        }
      }
      return Container();
    },
    pages: [
      FlutterFormPage(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 46),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    SizedBox(
                      height: 60,
                    ),
                    Text(
                      'Inloggen',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.w900,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const Spacer(),
            FlutterFormInputEmail(controller: emailController),
            const SizedBox(
              height: 25,
            ),
            FlutterFormInputPassword(controller: passwordController),
            const Spacer(),
          ],
        ),
      ),
    ],
    checkPage: CheckPage(
      title: const Text(
        "All entered info: ",
        style: TextStyle(
          fontSize: 25,
          fontWeight: FontWeight.w900,
        ),
      ),
      inputCheckWidget:
          (String title, String? description, Function onPressed) {
        return GestureDetector(
          onTap: () async {
            await onPressed();
          },
          child: Container(
            width: MediaQuery.of(context).size.width * 0.9,
            padding: const EdgeInsets.only(
              top: 18,
              bottom: 16,
              right: 18,
              left: 27,
            ),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10),
/               boxShadow: [
                BoxShadow(
                  color: const Color(0xFF000000).withOpacity(0.20),
                  blurRadius: 5,
                ),
              ],
            ),
            child: Column(
              children: [
                Row(
                  children: [
                    Container(
                      width: 30,
                      height: 30,
                      decoration: BoxDecoration(
                        color: const Color(0xFFD8D8D8),
                        borderRadius: BorderRadius.circular(5),
                      ),
                    ),
                    const SizedBox(
                      width: 16,
                    ),
                    Text(
                      title,
                      style: const TextStyle(
                        fontWeight: FontWeight.w900,
                        fontSize: 20,
                      ),
                    ),
                    const Spacer(),
                    const Icon(Icons.arrow_forward),
                  ],
                ),
                if (description != null)
                  const SizedBox(
                    height: 9,
                  ),
                if (description != null)
                  Text(
                    description,
                    style: const TextStyle(fontSize: 16),
                  )
              ],
            ),
          ),
        );
      },
      mainAxisAlignment: MainAxisAlignment.start,
    ),
  ),
),