increment_decrement_form_field 1.0.0

Increment or decrement a value using spaced horizontal icon buttons

example/lib/main.dart

/*
  This is an example of how to use increment_decrement_form_field
 */
import 'package:flutter/material.dart';
import 'package:increment_decrement_form_field/increment_decrement_form_field.dart';

void main() {
  // form key and holder for value for form example at bottom
  GlobalKey<FormState> formKey = GlobalKey();
  int holder = 0;

  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 500,
            child: Column(
              children: [
                /*
                  increment, decrement an int
                */
                IncrementDecrementFormField<int>(
                  // an initial value
                  initialValue: 0,

                  // return the widget you wish to hold the value, in this case Text
                  // if no value set 0, otherwise display the value as a string
                  displayBuilder: (value, field) {
                    return Text(
                      value == null ? "0" : value.toString(),
                    );
                  },

                  // run when the left button is pressed (decrement)
                  // the current value is passed as a parameter
                  // return what you want to update the display value to
                  // when decrement is pressed. In this case if null 0,
                  // otherwise current value -1
                  onDecrement: (currentValue) {
                    return currentValue! - 1;
                  },

                  // run when the right button is pressed (increment)
                  // the current value is passed as a parameter
                  // return what you want to update the display value to
                  // when increment is pressed. In this case if null 0,
                  // otherwise current value +1
                  onIncrement: (currentValue) {
                    return currentValue! + 1;
                  },
                ),

                /*
                  Alphabet increment decrement with error checking
                */
                IncrementDecrementFormField<String>(
                  // auto validate set, so validates whenever input changes
                  autovalidateMode: AutovalidateMode.always,

                  // set an initial value
                  initialValue: "a",

                  // show the current char
                  displayBuilder: (value, field) {
                    return Text(
                      value!,
                    );
                  },

                  // decrement current charcode by 1
                  onDecrement: (currentValue) {
                    return String.fromCharCode(
                      currentValue!.codeUnitAt(0) - 1,
                    );
                  },

                  // increment current charcode by 1
                  onIncrement: (currentValue) {
                    return String.fromCharCode(
                      currentValue!.codeUnitAt(0) + 1,
                    );
                  },

                  // error if not between a and z lowercase
                  validator: (value) {
                    if (value == null ||
                        value.length != 1 ||
                        value.codeUnitAt(0) < "a".codeUnitAt(0) ||
                        value.codeUnitAt(0) > "z".codeUnitAt(0)) {
                      return "Value out of bounds";
                    }
                    return null;
                  },
                ),

                /*
                  increment by 2 decrement by 1 with form and validation
                  valid if between 0 and 10 inclusive
                */
                StatefulBuilder(
                  builder: (context, setState) {
                    return Form(
                      key: formKey,
                      child: Column(
                        children: [
                          IncrementDecrementFormField<int>(
                            // auto validate and set init value
                            autovalidateMode: AutovalidateMode.always,
                            initialValue: 0,

                            // show current value
                            displayBuilder: (value, field) {
                              return Text(
                                value!.toString(),
                              );
                            },

                            // decrement by 1
                            onDecrement: (currentValue) {
                              return currentValue! - 1;
                            },

                            // increment by 2
                            onIncrement: (currentValue) {
                              return currentValue! + 2;
                            },

                            // validate if between 0 and 10 inclusive
                            validator: (value) {
                              if (value == null || value > 10 || value < 0) {
                                return "Value out of bounds";
                              }
                              return null;
                            },

                            // add on saved function to set the holder value
                            // when the for calls onSaved
                            onSaved: (value) {
                              holder = value!;
                            },
                          ),

                          // a submit button and display for submitted value
                          // if successful validation set the holder by calling
                          // save
                          ElevatedButton(
                            onPressed: () {
                              if (formKey.currentState!.validate()) {
                                setState(() {
                                  formKey.currentState!.save();
                                });
                              }
                            },
                            child: const Text(
                              "Submit",
                            ),
                          ),

                          // display submitted value
                          Text(
                            "Submitted Value: $holder",
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}