Create custom text field using FormBuilderField

[martinogarrizzo5]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

9.2.1

Platforms

• Android
• iOS
• Linux
• MacOS
• Web
• Windows

Flutter doctor

Flutter doctor

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.3 23D56 darwin-arm64, locale it-IT)
    • Flutter version 3.19.6 on channel stable at /Users/martinmeneghetti/dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (2 weeks ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/martinmeneghetti/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] IntelliJ IDEA Community Edition (version 2023.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.87.2)
    • VS Code at /Users/martinmeneghetti/Desktop/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64  • Android 14 (API 34) (emulator)
    • macOS (desktop)             • macos         • darwin-arm64   • macOS 14.3 23D56 darwin-arm64
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 124.0.6367.91
    ! Error: Browsing on the local area network for iPhone di Martin. Ensure the device is unlocked and attached with a
      cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

Minimal code example

Code sample

FormBuilderField<String>(
          name: name,
          builder: (field) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                if (label != null)
                  Text(
                    label!,
                    style: field.hasError
                        ? customStyles.labelStyle.copyWith(
                            color: Theme.of(context).colorScheme.error,
                          )
                        : customStyles.labelStyle,
                  ),
                const Gap(6),
                FormBuilderTextField(
                  name: name,
                  obscureText: obscureText,
                  keyboardType: keyboardType,
                  decoration: InputDecoration(
                    labelText: placeholder,
                    suffixIcon: IconButton(
                      color: Theme.of(context).colorScheme.secondary,
                      disabledColor: Theme.of(context).colorScheme.secondary,
                      padding: const EdgeInsets.symmetric(horizontal: 24),
                      onPressed: onSuffixTap,
                      icon: Icon(
                        suffixIcon,
                        size: 28,
                      ),
                    ),
                  ),
                  textInputAction: textInputAction,
                )
              ],
            );
          },
        ),

Current Behavior

I tried to create a custom form field using the base FormBuilderTextField as part of it. Is it correct? I tried to put a print instruction inside the builder method of the FormBuilderField and I saw that each time I write inside the text field it gets printed twice.

Expected Behavior

I expect to see the printed message only once for each written character

Steps To Reproduce

No particular steps. I'm just trying to understand if the approach of creating the custom field is correct or not

Aditional information

No response

[deandreamatias]

This is incorrect because duplicate form logic. You need create your own field from scrach.
Can see FormBuilderTextField and reuse code https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/blob/main/lib/src/fields/form_builder_text_field.dart