Hint / Label Text Not Show on app relaunch in release

[Crucialjun]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

9.3.0

Platforms

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

Flutter doctor

Flutter doctor

[√] Flutter (Channel stable, 3.27.1, on Microsoft Windows [Version 10.0.27764.1000], locale en-GB)
    • Flutter version 3.27.1 on channel stable at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (4 days ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • Dart version 3.6.0
    • DevTools version 2.40.2

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at C:\Users\Nicholas\AppData\Local\Android\sdk
    • Platform android-Baklava, build-tools 35.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2019 16.11.42)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.35425.106
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2024.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 21.0.3+-12282718-b509.11)

[√] VS Code (version 1.96.2)
    • VS Code at C:\Users\Nicholas\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.103.20241202

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 15 (API 35) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.27764.1000]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 131.0.6778.205
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 132.0.2957.55

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

• No issues found!

Minimal code example

Code sample

class SignInScreen extends StatefulWidget {
  static const String routeName = '/sign_in';
  const SignInScreen({super.key});

  @override
  State<SignInScreen> createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final _formKey = GlobalKey<FormBuilderState>();

  bool isValid = false;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<LoginBloc, LoginState>(
      builder: (context, state) {
        return Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Theme.of(context).scaffoldBackgroundColor,
          ),
          body: FormBuilder(
            key: _formKey,
            onChanged: () {
              WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
                isValid = _formKey.currentState?.isValid ?? false;
                setState(() {});
              });
            },
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Text(
                      'Welcome Back',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 24.sp, fontWeight: FontWeight.w700),
                    ),
                    SizedBox(height: 16.h),
                    Text(
                      "Sign in to continue",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 14.sp, fontWeight: FontWeight.w400),
                    ),
                    SizedBox(height: 35.h),
                    FormBuilderTextField(
                      name: "email",
                      keyboardType: TextInputType.emailAddress,
                      decoration: const InputDecoration(labelText: "Email"),
                      validator: FormBuilderValidators.compose([
                        FormBuilderValidators.required(),
                        FormBuilderValidators.email()
                      ]),
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                    ),
                    SizedBox(height: 16.h),
                    FormBuilderTextField(
                      obscureText: state.obscurePassword,
                      validator: FormBuilderValidators.compose([
                        FormBuilderValidators.required(),
                        FormBuilderValidators.password(
                            minLength: 6,
                            minSpecialCharCount: 0,
                            minUppercaseCount: 0,
                            minLowercaseCount: 0)
                      ]),
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                      name: "password",
                      decoration: InputDecoration(
                          labelText: "Password",
                          suffixIcon: InkWell(
                            onTap: () {
                              context.read<LoginBloc>().add(
                                  TogglePasswordVisibility(
                                      obscurePassword: state.obscurePassword));
                            },
                            child: Icon(
                              state.obscurePassword
                                  ? Icons.visibility
                                  : Icons.visibility_off,
                              color: Theme.of(context).colorScheme.primary,
                            ),
                          )),
                    ),
                    SizedBox(height: 16.h),
                    InkWell(
                      onTap: () {
                        context
                            .read<LoginBloc>()
                            .add(NavigateToForgotPassword());
                      },
                      child: Text("Forgot Password?",
                          textAlign: TextAlign.end,
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            color:
                                Theme.of(context).brightness == Brightness.light
                                    ? const Color(AppColors.primaryColor700)
                                    : const Color(0xff8f9bb3).withOpacity(0.5),
                          )),
                    ),
                    SizedBox(height: 40.h),
                    AppButton(
                        enabled: isValid,
                        onTap: () {
                          if (_formKey.currentState!.saveAndValidate()) {
                            context.read<LoginBloc>().add(LoginUser(
                                  email: _formKey.currentState!.fields['email']!
                                      .value as String,
                                  password: _formKey.currentState!
                                      .fields['password']!.value as String,
                                ));
                          }
                        },
                        isLoading: state is LoginLoading,
                        label: "Sign In"),
                    const SizedBox(
                      height: 18.5,
                    ),
                    InkWell(
                      onTap: () {
                        context.read<LoginBloc>().add(NavigateToSignUp());
                      },
                      child: Text.rich(
                        TextSpan(
                          text: "Don't have an account? ",
                          style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: 14.sp,
                              color: const Color(0xff8f9bb3)),
                          children: [
                            TextSpan(
                              text: " Sign Up",
                              style: TextStyle(
                                fontWeight: FontWeight.w600,
                                fontSize: 14.sp,
                                color: Theme.of(context).colorScheme.primary,
                              ),
                            )
                          ],
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    /*
                    SizedBox(
                      height: 21.5.h,
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Container(
                            height: 1,
                            color: const Color(0xff98b3d0).withOpacity(0.2),
                          ),
                        ),
                        SizedBox(width: 16.w),
                        Text(
                          "or",
                          style: TextStyle(
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400,
                              color: const Color(0xff8f9bb3)),
                        ),
                        SizedBox(width: 16.w),
                        Expanded(
                          child: Container(
                            height: 1,
                            color: const Color(0xff98b3d0).withOpacity(0.2),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 21.h,
                    ),
                    const SocialAuthContainer(
                      label: "Google",
                      asset: AppAssets.google,
                    ),
                    SizedBox(
                      height: 14.h,
                    ),
                    const SocialAuthContainer(
                      label: "Apple",
                      asset: AppAssets.apple,
                    ),

                    */
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

Current Behavior

FormBuilderTextField and setting either the label text or hint text functions well but when the app is closed and reopened they do not show. Tried setting hint text alone same scenario, and label text alone, same scenario. I tried setting floatingLabelBehavior: FloatingLabelBehavior.always, still same behaviour. Seems to work well in debug mode but buggy in release mode

Expected Behavior

The hint text or label text if set should show on the textfield is the text field is empty

Steps To Reproduce

Add either label text or hint text, create a release app, run the app , close app and reopen.

Aditional information

With only label text and floatingLabelBehavior: FloatingLabelBehavior.always,

With only hint text

[deandreamatias]

Hi @Crucialjun
please add the minimal code to reproduce
Also, this bug happens using TextField directly from Flutter?

[Crucialjun]

Here is the code for the login screen on the screenshot above

class SignInScreen extends StatefulWidget {
  static const String routeName = '/sign_in';
  const SignInScreen({super.key});

  @override
  State<SignInScreen> createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final _formKey = GlobalKey<FormBuilderState>();

  bool isValid = false;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<LoginBloc, LoginState>(
      builder: (context, state) {
        return Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Theme.of(context).scaffoldBackgroundColor,
          ),
          body: FormBuilder(
            key: _formKey,
            onChanged: () {
              WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
                isValid = _formKey.currentState?.isValid ?? false;
                setState(() {});
              });
            },
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Text(
                      'Welcome Back',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 24.sp, fontWeight: FontWeight.w700),
                    ),
                    SizedBox(height: 16.h),
                    Text(
                      "Sign in to continue",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 14.sp, fontWeight: FontWeight.w400),
                    ),
                    SizedBox(height: 35.h),
                    FormBuilderTextField(
                      name: "email",
                      keyboardType: TextInputType.emailAddress,
                      decoration: const InputDecoration(labelText: "Email"),
                      validator: FormBuilderValidators.compose([
                        FormBuilderValidators.required(),
                        FormBuilderValidators.email()
                      ]),
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                    ),
                    SizedBox(height: 16.h),
                    FormBuilderTextField(
                      obscureText: state.obscurePassword,
                      validator: FormBuilderValidators.compose([
                        FormBuilderValidators.required(),
                        FormBuilderValidators.password(
                            minLength: 6,
                            minSpecialCharCount: 0,
                            minUppercaseCount: 0,
                            minLowercaseCount: 0)
                      ]),
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                      name: "password",
                      decoration: InputDecoration(
                          labelText: "Password",
                          suffixIcon: InkWell(
                            onTap: () {
                              context.read<LoginBloc>().add(
                                  TogglePasswordVisibility(
                                      obscurePassword: state.obscurePassword));
                            },
                            child: Icon(
                              state.obscurePassword
                                  ? Icons.visibility
                                  : Icons.visibility_off,
                              color: Theme.of(context).colorScheme.primary,
                            ),
                          )),
                    ),
                    SizedBox(height: 16.h),
                    InkWell(
                      onTap: () {
                        context
                            .read<LoginBloc>()
                            .add(NavigateToForgotPassword());
                      },
                      child: Text("Forgot Password?",
                          textAlign: TextAlign.end,
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w400,
                            color:
                                Theme.of(context).brightness == Brightness.light
                                    ? const Color(AppColors.primaryColor700)
                                    : const Color(0xff8f9bb3).withOpacity(0.5),
                          )),
                    ),
                    SizedBox(height: 40.h),
                    AppButton(
                        enabled: isValid,
                        onTap: () {
                          if (_formKey.currentState!.saveAndValidate()) {
                            context.read<LoginBloc>().add(LoginUser(
                                  email: _formKey.currentState!.fields['email']!
                                      .value as String,
                                  password: _formKey.currentState!
                                      .fields['password']!.value as String,
                                ));
                          }
                        },
                        isLoading: state is LoginLoading,
                        label: "Sign In"),
                    const SizedBox(
                      height: 18.5,
                    ),
                    InkWell(
                      onTap: () {
                        context.read<LoginBloc>().add(NavigateToSignUp());
                      },
                      child: Text.rich(
                        TextSpan(
                          text: "Don't have an account? ",
                          style: TextStyle(
                              fontWeight: FontWeight.w400,
                              fontSize: 14.sp,
                              color: const Color(0xff8f9bb3)),
                          children: [
                            TextSpan(
                              text: " Sign Up",
                              style: TextStyle(
                                fontWeight: FontWeight.w600,
                                fontSize: 14.sp,
                                color: Theme.of(context).colorScheme.primary,
                              ),
                            )
                          ],
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    /*
                    SizedBox(
                      height: 21.5.h,
                    ),
                    Row(
                      children: [
                        Expanded(
                          child: Container(
                            height: 1,
                            color: const Color(0xff98b3d0).withOpacity(0.2),
                          ),
                        ),
                        SizedBox(width: 16.w),
                        Text(
                          "or",
                          style: TextStyle(
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400,
                              color: const Color(0xff8f9bb3)),
                        ),
                        SizedBox(width: 16.w),
                        Expanded(
                          child: Container(
                            height: 1,
                            color: const Color(0xff98b3d0).withOpacity(0.2),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 21.h,
                    ),
                    const SocialAuthContainer(
                      label: "Google",
                      asset: AppAssets.google,
                    ),
                    SizedBox(
                      height: 14.h,
                    ),
                    const SocialAuthContainer(
                      label: "Apple",
                      asset: AppAssets.apple,
                    ),

                    */
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

[deandreamatias]

Need to be a minimal code example, without dependencies, with only form widgets

[Crucialjun]

Error seems to be coming from TextFormField, tried with TextFormField and getting the same behaviour

[Crucialjun]

I tried again using a clean form without the form builder, only utilizing TextFormField, and I didn’t encounter any errors. It seems that the issue originates from the form builder. This may be related to state management, as the error only occurs when the app restarts

[deandreamatias]

Hi!
I need a minimal code example to can execute:

• Without external packages and dependencies
• Without refereces of imports
• With only Flutter Material or Cupertino widgets and FormBuilder widgets
• Starting from main Dart method

Example:

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FormBuilder Example',
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        FormBuilderLocalizations.delegate,
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: FormBuilderLocalizations.supportedLocales,
      home: const _ExamplePage(),
    );
  }
}

class _ExamplePage extends StatefulWidget {
  const _ExamplePage();

  @override
  State<_ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<_ExamplePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FormBuilder(
        key: _formKey,
        child: Column(
          children: [
            FormBuilderTextField(
              name: 'full_name',
              decoration: const InputDecoration(labelText: 'Full Name'),
              validator: FormBuilderValidators.compose([
                FormBuilderValidators.required(),
              ]),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _formKey.currentState?.saveAndValidate();
                debugPrint(_formKey.currentState?.value.toString());
              },
              child: const Text('Print'),
            )
          ],
        ),
      ),
    );
  }
}

Thanks a lot