TextFormField suffix icon doesn't turn red on validation error

Steps to Reproduce

Create and validate the TextFormField below:

 TextFormField(
  decoration: const InputDecoration(
    labelText: "Password",
    border: OutlineInputBorder(),
    suffixIcon: Icon(Icons.lock_outline),
  ),
  validator: (value) {
    if (value!.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
)

Expected results:

Actual results:

@carlosfiori

Hi @carlosfiori
Thanks for filing the issue!

Reproduced the issue using the following minimal code sample

minimal code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            
            decoration: const InputDecoration(
              labelText: "Password",
              border: OutlineInputBorder(),
              prefixIcon: Icon(Icons.lock_outline),
              suffixIcon: Icon(Icons.lock_outline,),
            ),
            
            validator: (value) {
              if (value!.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false otherwise.
                if (_formKey.currentState!.validate()) {
                  // If the form is valid, display a snackbar. In the real world,
                  // you'd often call a server or save the information in a database.
                  ScaffoldMessenger.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

preview

Reproduced on the following channels

`stable`	`master`
✅	✅

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.0, on macOS 11.3.1 20E241 darwin-x64, locale en-GB)
    • Flutter version 2.2.0 at /Users/tahatesser/Code/flutter_stable
    • Framework revision b22742018b (4 days ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.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 11.0.8+10-b944.6916264)

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

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios            • iOS 14.6
    • iPhone 12 (mobile)     • D5A130FB-A402-4C16-8F33-7806BCE32682 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS 11.3.1 20E241 darwin-x64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 90.0.4430.212

• No issues found!

[✓] Flutter (Channel master, 2.3.0-13.0.pre.33, on macOS 11.3.1 20E241 darwin-x64, locale en-GB)
    • Flutter version 2.3.0-13.0.pre.33 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84734ecc54 (7 hours ago), 2021-05-18 23:09:03 -0700
    • Engine revision 2398dea918
    • Dart version 2.14.0 (build 2.14.0-119.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.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 11.0.8+10-b944.6916264)

[!] Android Studio
    • Android Studio at /Volumes/Extreme/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2021.1.1)
    • IntelliJ at /Volumes/Extreme/IntelliJ IDEA CE.app
    • Flutter plugin version 55.1.5
    • Dart plugin version 211.7233

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

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios            • iOS 14.6
    • iPhone 12 (mobile)     • D5A130FB-A402-4C16-8F33-7806BCE32682 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS 11.3.1 20E241 darwin-x64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 90.0.4430.212

! Doctor found issues in 1 category.

✅ : Reproducible ❌: Not Reproducible

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

@bleroux

@bleroux Did you fix this recently or am I misremembering? I know you've recently made changes to this kind of theming.

@bleroux

@bleroux Did you fix this recently or am I misremembering? I know you've recently made changes to this kind of theming.

@justinmc I have not yet filed fixes for the prefix/suffix icons. One of the current PRs, I'm working on is the M3 tests migration for prefix/suffix. It will probably be ready after Google/IO.

FYI, when running the given code sample, the icon color turns to red for Material3 and it does not for Material2. I had a quick look to M2 and M3 spec and in both cases the icon color is supposed to turn red.
I will work on a fix.

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.

Navigation Menu

Repository navigation

TextFormField suffix icon doesn't turn red on validation error #82823

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextFormField suffix icon doesn't turn red on validation error #82823

Description

Steps to Reproduce

Activity

TahaTesser commented on May 19, 2021

flutter-triage-bot commented on Apr 5, 2024

justinmc commented on May 8, 2024

bleroux commented on May 8, 2024

bleroux commented on May 8, 2024

github-actions commented on Jun 11, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions