flutter_form_fields 0.0.5

Custom widgets to help developers create input fields with validations that are not available in flutter sdk.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_form_fields/flutter_form_fields.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData.light().copyWith(useMaterial3: true),
        home: Scaffold(
            appBar: AppBar(
              title: const Text(
                "Feedback Form",
              ),
            ),
            body: const FormWidget()));
  }
}

class FormWidget extends StatefulWidget {
  const FormWidget({super.key});

  @override
  State<FormWidget> createState() => _FormWidgetState();
}

class _FormWidgetState extends State<FormWidget> {
  late final GlobalKey<FormState> formKey;
  late final RadioFormFieldController<bool> understoodController;
  late final RadioFormFieldController<int> ratingController;
  late final RadioFormFieldController<bool> willRecommendController;
  late final ProfileImageFormFieldController profileImageController;
  late final CheckBoxFormFieldController<Type> mostLikedWidgetsController;

  @override
  void initState() {
    formKey = GlobalKey<FormState>();
    understoodController = RadioFormFieldController();
    ratingController = RadioFormFieldController();
    willRecommendController = RadioFormFieldController();
    profileImageController = ProfileImageFormFieldController();
    mostLikedWidgetsController = CheckBoxFormFieldController();
    super.initState();
  }

  @override
  void dispose() {
    formKey.currentState?.dispose();
    understoodController.dispose();
    ratingController.dispose();
    willRecommendController.dispose();
    profileImageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          /// if both errorText and validator is null then default error text will be displayed.
          ProfileImageFormField(
            controller: profileImageController,
          ),

          /// If validator is not null the widget will display ths String returned by the validator instead of errorText or default Error Text.
          RadioFormField<bool>(
            titleText:
                "I hope you understand how to use this package by this example app. Can you please confirm?",
            controller: understoodController,
            items: [
              RadioFormFieldItem(hintText: 'Yes', value: true),
              RadioFormFieldItem(hintText: 'No', value: false)
            ],
            direction: Axis.vertical,
            validator: (val) {
              if (understoodController.value == null) {
                return "Please Select at least one option";
              }
              return null;
            },
          ),
          RadioFormField<int>(
              titleText: "How much will you rate us for this package?",
              controller: ratingController,
              validator: (val) {
                if (ratingController.value == null) {
                  return "Please Rate us";
                }
                return null;
              },
              items: [
                RadioFormFieldItem(hintText: '5 Start', value: 5),
                RadioFormFieldItem(hintText: '4 Start', value: 4),
                RadioFormFieldItem(hintText: '3 Start', value: 3),
                RadioFormFieldItem(hintText: '2 Start', value: 3),
                RadioFormFieldItem(hintText: '1 Start', value: 1),
              ]),

          /// If validator is null and errorText is not null then the Widget will display the error text given in errorText parameter.
          RadioFormField<bool>(
            titleText:
                "Will you recommend this package to your developer friends?",
            controller: willRecommendController,
            errorText: "we want to know. Please!!",
            items: [
              RadioFormFieldItem(hintText: 'Yes', value: true),
              RadioFormFieldItem(hintText: 'No', value: false)
            ],
          ),
          CheckBoxFormField<Type>(
            titleText: "Select the two widgets you liked the most?",
            items: [
              CheckBoxFormFieldItem(
                  hintText: 'ProfileImageFormField Widget',
                  value: ProfileImageFormField),
              CheckBoxFormFieldItem(
                  hintText: 'RadioFormField Widget', value: RadioFormField),
              CheckBoxFormFieldItem(
                  hintText: 'CheckBoxFormField Widget',
                  value: CheckBoxFormField),
            ],
            controller: mostLikedWidgetsController,
            validator: (values) {
              return values?.isNotEmpty ?? false
                  ? null
                  : "Please select a widget";
            },
          ),

          ElevatedButton(
            onPressed: () {
              if (formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text(
                      "Feedback Form Submitted Successfully",
                    ),
                    backgroundColor: Colors.green,
                  ),
                );
              } else {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text(
                      "Form is not valid",
                    ),
                    backgroundColor: Colors.red,
                  ),
                );
              }
            },
            child: const Text(
              "Submit",
            ),
          )
        ],
      ),
    );
  }
}