CupertinoTextField overriding decoration when disabled.

Steps to Reproduce

Run flutter create bug.
Change content of lib/main.dart to:

import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      theme: CupertinoThemeData(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              CupertinoTextField(
                enabled: true,
                decoration: BoxDecoration(color: Color(0xFFFF0000)),
              ),
              CupertinoTextField(
                enabled: false,
                decoration: BoxDecoration(color: Color(0xFFFF0000)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Notice how the disabled field has a gray background

Expected results: The background of both text fields are red. I expected the background color to be respected, just like it was before #78058

Actual results: The background of the disabled text field is gray.

Logs

bug % flutter analyze
Analyzing bug...                                                        
No issues found! (ran in 4.3s)

bug % flutter doctor -v
[✓] Flutter (Channel stable, 2.2.0, on macOS 11.3 20E232 darwin-x64, locale en-US)
    • Flutter version 2.2.0 at /Users/gabroyer/Development/flutter
    • Framework revision b22742018b (13 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 at /usr/local/Caskroom/android-platform-tools/30.0.0
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

    ✗ No valid Android SDK platforms found in /usr/local/Caskroom/android-platform-tools/30.0.0/platforms. Directory
      was empty.
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/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 (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

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

[✓] Connected device (3 available)
    • iPhone 11 (mobile)      • 78D85886-701C-4254-9175-45343C35C6F5 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • iPhone 12 mini (mobile) • 3E837647-6228-43E1-BD9D-A642E83A922D • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • Chrome (web)            • chrome                               • web-javascript • Google Chrome 90.0.4430.212

! Doctor found issues in 2 categories.

@GabRoyer

@GabRoyer
I do see grey backgound for the disabled textfield, just below the red one, but according to the enabled property document, it states:

Text fields in disabled states have a light grey background and don't respond to touch events including the prefix, suffix and the clear button.

https://api.flutter.dev/flutter/cupertino/CupertinoTextField/enabled.html

That's correct, but doing so prevents styling the disabled textfield background color at all. The default behavior indeed should be to gray it out, but either we should have a "disabledBackground" property or use the decoration styling. In any case, this introduced a breaking change for users of this control.

@LongCatIsLooong

Thanks for the details.

Cc: @LongCatIsLooong for further insights.

Hello I have this issue too, disabled color should be customizable.

Is there a fix for this yet? I am still facing this issue.

any work around?

I'm just gonna chime in and say that I too would like this feature to be considered.

We all agree that styling visual elements is primordial to any UI framework. And Flutter offer good customization… For the "normal" state. Yet, UI elements can have multiple states hovered, highlighted, pressed, disabled, etc. Offering customization for these states as well should be prioritized. As is, I'm not going to be able to use CupertinoTextField because of this issue.

@flakerimi

@flakerimi I solved this problem with a custom TextField.
Instead of using enabled I use readOnly and AbsorbPointer to disable onTap for widgets.

You can use this snippet of code. Here I use enabledDecoration and disabledDecoration depending on the enabled field.
If you use other fields of CupertinoTextField just add them to this class as well and then pass through.

class TextField extends StatelessWidget {
  final bool enabled;
  final BoxDecoration? enabledDecoration;
  final BoxDecoration? disabledDecoration;
  final EdgeInsetsGeometry padding;
  final int? maxLength;
  final TextEditingController? controller;
  final TextStyle? placeholderStyle;
  final Widget? suffix;
  final Color? cursorColor;
  final TextStyle? style;
  final String? placeholder;
  final int? maxLines;
  final int? minLines;

  const TextField({
    super.key,
    this.enabledDecoration,
    this.disabledDecoration,
    this.enabled = true,
    this.padding = const EdgeInsets.all(7.0),
    this.maxLength,
    this.controller,
    this.placeholderStyle,
    this.suffix,
    this.cursorColor,
    this.style,
    this.placeholder,
    this.maxLines,
    this.minLines,
  });

  @override
  Widget build(BuildContext context) {
    return CupertinoTextField(
      readOnly: !enabled,
      decoration: enabled ? enabledDecoration : disabledDecoration,
      padding: padding,
      maxLength: maxLength,
      controller: controller,
      placeholderStyle: placeholderStyle,
      suffix: enabled ? suffix : AbsorbPointer(child: suffix),
      cursorColor: cursorColor,
      style: style,
      placeholder: placeholder,
      maxLines: maxLines,
      minLines: minLines,
    );
  }
}

Make `CupertinoTextField` respect decoration color when disabled (#14…

Make `CupertinoTextField` respect decoration color when disabled (flu…

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.

Make `CupertinoTextField` respect decoration color when disabled (#14…

Navigation Menu

Repository navigation

CupertinoTextField overriding decoration when disabled. #83531

Steps to Reproduce

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

CupertinoTextField overriding decoration when disabled. #83531

Description

Steps to Reproduce

Activity

darshankawar commented on May 28, 2021

GabRoyer commented on May 31, 2021

darshankawar commented on Jun 1, 2021

marcosmko commented on Jul 20, 2021

Pranoy1c commented on Sep 25, 2022

1 remaining item

flakerimi commented on Jan 26, 2024

ClementCardonnel commented on Apr 19, 2024

okhomin commented on May 5, 2024

github-actions commented on Jul 1, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions