Render trouble with TextFormField widget #145872

Bapti08 · 2024-03-28T00:44:18Z

Steps to reproduce

Create a TextFormField widget with UnderlineInputBorder decoration.
Set borderSide attribute to BorderSide.none.
Set borderRadius to BorderRadius.circular(15).
You should see that your TextFormField appear with extralights border.
If you put borderSide to BorderSide(color: Colors.yellow) for example, you should see your that your border is still black, it seem inpossible to change border color anymore.

Expected results

With the component defined we should have this result (like we had in the previous versions of flutter)

Actual results

Actually the input present some strange border specially visible at the top of the widget

Code sample

Here is my TextInput component. Simply instanciate and you could reproduce the problem (no need to change any default or optionals parameters, just pass a controller)

Code sample

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

class TextInput extends StatelessWidget
{
  const TextInput({
    super.key, 
    required this.controller,
    this.placeholder = '',
    this.prefixIcon,
    this.suffixIcon,
    this.obscur = false,
    this.error,
    this.value,
    this.fillColor = const Color(0xFFE3EEFF),
    this.border = const BorderSide(
      width: 0,
      style: BorderStyle.none
    ),
    this.keyboardType,
    this.enable = true,
    this.multiLine = false,
    this.padding = const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
    this.minLines = 1,
    this.onChanged,
    this.borderRadius,
    this.formater,
    this.focus
  });

  final String placeholder;
  final TextEditingController controller;
  final Widget? prefixIcon;
  final Widget? suffixIcon;
  final bool obscur;
  final String? error;
  final String? value;
  final Color fillColor;
  final BorderSide border;
  final TextInputType? keyboardType;
  final bool enable, multiLine;
  final EdgeInsets? padding;
  final int? minLines;
  final Function(String)? onChanged;
  final BorderRadius? borderRadius;
  final String? formater;

  final FocusNode? focus;

  @override
  Widget build(BuildContext context) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      TextFormField(
        onChanged: onChanged,
        focusNode: focus,
        textCapitalization: keyboardType == TextInputType.emailAddress ? TextCapitalization.none : TextCapitalization.sentences,
        enabled: enable,
        maxLines: multiLine ? null : 1,
        minLines: multiLine ? minLines : 1,
        controller: controller,
        obscureText: obscur,
        initialValue: value,
        keyboardType: keyboardType,
        style: const TextStyle(
          color: Color(0xFF1B316B),
          fontFamily: 'Inter',
          fontSize: 14
        ),
        decoration: InputDecoration(
          prefixIcon: prefixIcon,
          suffixIcon: suffixIcon,
          labelText: placeholder,
          filled: true,
          fillColor: fillColor,
          contentPadding: padding,
          border: UnderlineInputBorder(
            borderSide: border,
            borderRadius: borderRadius ?? BorderRadius.circular(15)
          )
        ),
        inputFormatters: formater == 'number' ? [
          FilteringTextInputFormatter.deny(RegExp(r"[a-zA-Z]+|\s")),
          _TextNumberFormater()
        ] : null,
      ),
      Visibility(
        visible: error != null,
        child: Text(
          error ?? '',
          style: const TextStyle(
            color: Colors.red,
            fontFamily: 'Inter',
            fontSize: 12
          ),
        ),
      )
    ]
  );
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.19.4, on Ubuntu 23.10 6.5.0-26-generic, locale fr_FR.UTF-8)
    • Flutter version 3.19.4 on channel stable at /home/baptiste/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (il y a 7 jours), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /home/baptiste/Android/Sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /snap/android-studio/151/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Android Studio (version 2023.2)
    • Android Studio at /snap/android-studio/151
    • 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.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.86.0)
    • VS Code at /usr/share/code
    • Flutter extension version 3.84.0

[✓] Connected device (3 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 14 (API 34) (emulator)
    • Linux (desktop)              • linux         • linux-x64      • Ubuntu 23.10 6.5.0-26-generic
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 122.0.6261.94

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

• No issues found!

huycozy · 2024-03-28T10:35:59Z

Hi @Bapti08
Which target platform are you seeing this issue? I checked this on Android app but couldn't see it:

Your sample code is incomplete (_TextNumberFormater() is undefined) so please try with the complete code below and confirm.

Sample code

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

void main() {
  runApp(
    const MaterialApp(
      title: 'Flutter Demo',
      home: NewWidget(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: TextInput(
            controller: TextEditingController(),
            placeholder: 'Email',
            prefixIcon: const Icon(Icons.email),
            keyboardType: TextInputType.emailAddress,
            error: 'Email is required',
            onChanged: (value) => print(value),
          ),
        ),
      ),
    );
  }
}

class TextInput extends StatelessWidget {
  const TextInput(
      {super.key,
      required this.controller,
      this.placeholder = '',
      this.prefixIcon,
      this.suffixIcon,
      this.obscur = false,
      this.error,
      this.value,
      this.fillColor = const Color(0xFFE3EEFF),
      this.border = const BorderSide(width: 0, style: BorderStyle.none),
      this.keyboardType,
      this.enable = true,
      this.multiLine = false,
      this.padding = const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
      this.minLines = 1,
      this.onChanged,
      this.borderRadius,
      this.formater,
      this.focus});

  final String placeholder;
  final TextEditingController controller;
  final Widget? prefixIcon;
  final Widget? suffixIcon;
  final bool obscur;
  final String? error;
  final String? value;
  final Color fillColor;
  final BorderSide border;
  final TextInputType? keyboardType;
  final bool enable, multiLine;
  final EdgeInsets? padding;
  final int? minLines;
  final Function(String)? onChanged;
  final BorderRadius? borderRadius;
  final String? formater;

  final FocusNode? focus;

  @override
  Widget build(BuildContext context) => Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            onChanged: onChanged,
            focusNode: focus,
            textCapitalization: keyboardType == TextInputType.emailAddress ? TextCapitalization.none : TextCapitalization.sentences,
            enabled: enable,
            maxLines: multiLine ? null : 1,
            minLines: multiLine ? minLines : 1,
            controller: controller,
            obscureText: obscur,
            initialValue: value,
            keyboardType: keyboardType,
            style: const TextStyle(color: Color(0xFF1B316B), fontFamily: 'Inter', fontSize: 14),
            decoration: InputDecoration(
                prefixIcon: prefixIcon,
                suffixIcon: suffixIcon,
                labelText: placeholder,
                filled: true,
                fillColor: fillColor,
                contentPadding: padding,
                border: UnderlineInputBorder(borderSide: border, borderRadius: borderRadius ?? BorderRadius.circular(15))),
            inputFormatters: formater == 'number'
                ? [
                    FilteringTextInputFormatter.deny(RegExp(r"[a-zA-Z]+|\s")),
                  ]
                : null,
          ),
          Visibility(
            visible: error != null,
            child: Text(
              error ?? '',
              style: const TextStyle(color: Colors.red, fontFamily: 'Inter', fontSize: 12),
            ),
          ),
        ],
      );
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.4, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.4 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (29 hours ago), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • 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.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.58

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

• No issues found!

[!] Flutter (Channel master, 3.21.0-16.0.pre.14, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.21.0-16.0.pre.14 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f5b65bad0f (2 hours ago), 2024-03-27 18:20:55 -0700
    • Engine revision c602abdbae
    • Dart version 3.4.0 (build 3.4.0-279.0.dev)
    • DevTools version 2.34.0-dev.12
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • 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.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.86

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

! Doctor found issues in 1 category.

Bapti08 · 2024-03-28T11:27:14Z

Hi @huycozy

Sorry for incomplete sample code but you don't need _TextNumberFormater to reproduce.

I see this issue on android emulators and real device (SMN986N), iOS real devices and simulator. I tried with your code but still have the same issue...

huycozy · 2024-03-29T04:04:09Z

Strange, could you share device info (OS version, model)?

Bapti08 · 2024-03-29T09:44:02Z

I just test again on my Samsung Galaxy Note 20 Ultra (SMN986N) with Android 13.

Bapti08 · 2024-03-29T10:09:27Z

I just test again on my Samsung Galaxy Note 20 Ultra (SMN986N) with Android 13.

I also tried with OutlineInputBorder instead of UnderlineInputBorder and it work fine, the problem only occur with UnderlineInputBorder

huycozy · 2024-04-01T03:50:50Z

Thanks for the update. I think you are facing the same issue with #110470 also indicates with UnderlineInputBorder only.

So I will close this issue in favor of that one. Please leave there a comment with your device info that will help to expand the scope of the issue. Thanks!

github-actions · 2024-04-15T03:53:51Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

huycozy added the in triage Presently being triaged by the triage team label Mar 28, 2024

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Mar 28, 2024

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Mar 28, 2024

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Mar 29, 2024

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Mar 29, 2024

huycozy closed this as not planned Won't fix, can't repro, duplicate, stale Apr 1, 2024

huycozy added r: duplicate Issue is closed as a duplicate of an existing issue and removed in triage Presently being triaged by the triage team labels Apr 1, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Render trouble with TextFormField widget #145872

Render trouble with TextFormField widget #145872

Bapti08 commented Mar 28, 2024 •

edited

huycozy commented Mar 28, 2024

Bapti08 commented Mar 28, 2024

huycozy commented Mar 29, 2024

Bapti08 commented Mar 29, 2024

Bapti08 commented Mar 29, 2024

huycozy commented Apr 1, 2024

github-actions bot commented Apr 15, 2024

Render trouble with TextFormField widget #145872

Render trouble with TextFormField widget #145872

Comments

Bapti08 commented Mar 28, 2024 • edited

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented Mar 28, 2024

Bapti08 commented Mar 28, 2024

huycozy commented Mar 29, 2024

Bapti08 commented Mar 29, 2024

Bapti08 commented Mar 29, 2024

huycozy commented Apr 1, 2024

github-actions bot commented Apr 15, 2024

Bapti08 commented Mar 28, 2024 •

edited