textfield gets smaller after adding a content padding on ios

[maheshj01]

I am having a strange issue where on adding a content padding property to the textfield gets squeezed to a smaller height the same code works perfectly on android but not on ios.
I had to add it because the hint is not center aligned vertically by default if I add some content padding in any direction it gets vertically aligned.
Also notice that if the suffix icon is provided to textfield it doesnt squeeze or change its height
here is the textfield widget

TextField(
        controller: emailController,
        style: inputStyle,
        // obscureText:hint.contains("Password") ? isHidden : false,
        decoration: InputDecoration(
            contentPadding: EdgeInsets.only(left: 16),// on removing this line the issue is resolved but the hint is not vertically center aligned by default
            hintText:"Enter Password",
            hintStyle: TextStyle(
                color: Colors.black26,
                fontWeight: FontWeight.w400,
                fontSize: 14),
            suffixIcon: hint.contains("Password")
                ? IconButton(
                    onPressed: () {
                      // setState(() {
                      //   isHidden = isHidden ? false : true;
                      // });
                    },
                    icon: Icon(
                      Icons.remove_red_eye,
                      color: Colors.black54,
                    ),
                  )
                : null,
            border: OutlineInputBorder(
                borderSide: BorderSide(
              width: 3.5,
              color: Colors.black26,
            )),
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
              width: 2.0,
              color: Colors.black26,
            ))),
              ),

this is how both textfields look with and without suffix icon

heres is myflutter doctor -v output

✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.6 18G1012, locale en-IN)
    • Flutter version 1.9.1+hotfix.6 at /Users/almac03/Documents/flutter
    • Framework revision 68587a0916 (3 months ago), 2019-09-13 19:46:58 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/almac03/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.0, Build version 11A420a
    • CocoaPods version 1.7.5
[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 39.0.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
[✓] VS Code (version 1.40.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.6.0
[✓] Connected device (1 available)
    • iPhone 11 Pro Max • B1D782BE-C888-47D1-9BF7-91F523DF5A68 • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-0 (simulator)
• No issues found!

[HansMuller]

CC @justinmc

[justinmc]

I tried a simplified version and couldn't reproduce it. @maheshmnj Can you modify this code to reproduce the bug?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('contentPadding bug'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              TextField(
                controller: TextEditingController(text: 'no contentPadding'),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(30),
                ),
              ),
              TextField(
                controller: TextEditingController(text: 'yes contentPadding'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Here's what it looked like:

[maheshj01]

I tried a simplified version and couldn't reproduce it. @maheshmnj Can you modify this code to reproduce the bug?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('contentPadding bug'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              TextField(
                controller: TextEditingController(text: 'no contentPadding'),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(30),
                ),
              ),
              TextField(
                controller: TextEditingController(text: 'yes contentPadding'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Here's what it looked like:

yes I couldnt reproduce it but theres something wrong with my textfield widget I am not exactly sure what is wrong but I can see that after adding content padding property the textfield gets squeezed(only on ios),

can you just put this widget in a separate file

class TextFieldWidget extends StatefulWidget {
  final String hint;
  final TextEditingController controller;
  final Key key;

  TextFieldWidget({this.controller, this.hint, this.key});

  @override
  _TextFieldWidgetState createState() => _TextFieldWidgetState();
}

class _TextFieldWidgetState extends State<TextFieldWidget> {
  bool isHidden = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 46,
      child: TextField(
          key: widget.key,
          controller: widget.controller,
          style: inputStyle,
          obscureText: widget.hint.contains("Password") ? isHidden : false,
          decoration: InputDecoration(
              fillColor: Colors.red,
              contentPadding: EdgeInsets.only(left: 16, bottom: 15),
              hintText: widget.hint,
              hintStyle: TextStyle(
                  color: Colors.black26,
                  fontWeight: FontWeight.w400,
                  fontSize: 14),
              suffixIcon: widget.hint.contains("Password")
                  ? IconButton(
                      onPressed: () {
                        setState(() {
                          isHidden = isHidden ? false : true;
                        });
                      },
                      icon: Icon(
                        isHidden ? eye : eye_off,
                        color: Colors.black54,
                      ),
                    )
                  : null,
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 0.5, color: Colors.red)),
              focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 0.5, color: Colors.green)))),
    );
  }
}

and use it in your widget tree to reproduce the issue, as

           TextFieldWidget(
              hint: "text hint",  // if hint is "Password" adds an icon and the texfield is proper
            );

[justinmc]

Sorry, I need a working app to test. It looks like you have a bunch of undefined variables in your TextFieldWidget.