CODEWITHSUNDEEP
flutterflutter-layout
Akhil Soman
Akhil Soman

Reputation: 2217

Flutter - Text inside TextField is not vertically centering

I have created a Statefullwidget which contains a TextField and an Icon inside a Row. But the text inside the TextField is not vertically centered.

This is the code for the StatefullWidget. This widget is used inside a Column in a StatelessWidget.

class EditingFieldWidget extends StatefulWidget {
  final IconData iconData;
  bool obscureText;
  final String hintText;

  EditingFieldWidget({@required this.iconData, this.obscureText, @required this.hintText});

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

class _EditingFieldWidgetState extends State<EditingFieldWidget> {
  final textController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  bool _isFocused = false;

  @override
  void initState() {
    _focusNode.addListener(() {
      setState(() {
        _isFocused = _focusNode.hasFocus;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return SizedBox(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16),
        decoration: BoxDecoration(
          color: AppColors.inputBackgroundColor,
          border: Border.all(color: Colors.white, width: 4),
          borderRadius: BorderRadius.circular(30),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.3),
              spreadRadius: 2,
              blurRadius: 2,
              offset: Offset(0, 0), // changes position of shadow
            ),
          ],
        ),
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: TextField(
                  obscureText: widget.obscureText,
                  focusNode: _focusNode,
                  controller: textController,
                  keyboardType: TextInputType.text,
                  style: theme.textTheme.subtitle2,
                  textAlignVertical: TextAlignVertical.center,
                  decoration: InputDecoration(
                    hintText: widget.hintText,
                    hintStyle: theme.textTheme.subtitle2,
                    border: InputBorder.none,
                  ),
                ),
              ),
              SizedBox(width: 8),
              Icon(
                widget.iconData,
                size: 16,
                color: _isFocused ? AppColors.primaryColor : AppColors.secondaryTextColor,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The value of theme.textTheme.subTitle2 = TextStyle(fontSize: 10, color: AppColors.primaryTextColor, fontFamily: 'poppins')

This is the output that I get

enter image description here

How can I center the text vertically.?

Upvotes: 1

Views: 2043

Answers (5)

Akhil Soman
Akhil Soman

Reputation: 2217

I was able to fix the issue. It was something related with the border used for the TextField.

I modified the border property of the TextField and the issue is fixed now. The update code is

class _EditingFieldWidgetState extends State<EditingFieldWidget> {
  final textController = TextEditingController();
  final FocusNode _focusNode = FocusNode();
  bool _isFocused = false;

  @override
  void initState() {
    _focusNode.addListener(() {
      setState(() {
        _isFocused = _focusNode.hasFocus;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Container(
      height: 48,
      decoration: BoxDecoration(
        color: AppColors.inputBackgroundColor,
        borderRadius: BorderRadius.circular(30),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 2,
            blurRadius: 2,
            offset: Offset(0, 0), // changes position of shadow
          ),
        ],
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Flexible(
            child: TextField(
              obscureText: widget.obscureText,
              focusNode: _focusNode,
              controller: textController,
              keyboardType: TextInputType.text,
              style: theme.textTheme.subtitle2,
              decoration: InputDecoration(
                suffixIcon: Icon(
                  widget.iconData,
                  size: 20,
                  color: _isFocused ? AppColors.primaryColor : AppColors.secondaryTextColor,
                ),
                contentPadding: EdgeInsets.only(left: 12),
                hintText: widget.hintText,
                hintStyle: theme.textTheme.subtitle2,
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide(color: Colors.white, width: 4),
                ),
                border: OutlineInputBorder(
                  borderSide: BorderSide.none
                ),
              ),
            ),
          ),
          /*SizedBox(width: 8),
          Icon(
            widget.iconData,
            size: 16,
            color: _isFocused ? AppColors.primaryColor : AppColors.secondaryTextColor,
          ),*/
        ],
      ),
    );
  }
}

Upvotes: 0

neha
neha

Reputation: 117

The problem causing code in your layout is Intrinsic Height Widget property.Try below code in your app:

 return MaterialApp(
    home: new Scaffold(
    resizeToAvoidBottomPadding: false,
    appBar: AppBar(
    title: Text('Registration'),
),
body:SizedBox(
  child: Container(
    margin: EdgeInsets.only(top:20.0),
    padding: EdgeInsets.symmetric(horizontal: 16),
    decoration: BoxDecoration(
      color: Colors.white,
      border: Border.all(color: Colors.white, width: 4),
      borderRadius: BorderRadius.circular(30),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.3),
          spreadRadius: 2,
          blurRadius: 2,
          offset: Offset(0, 0), // changes position of shadow
        ),
      ],
    ),

      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: TextField(
              obscureText: false,
              focusNode: _focusNode,
              controller: textController,
              keyboardType: TextInputType.text,
              style: theme.textTheme.subtitle2,
              decoration: InputDecoration(
                hintText: widget.hintText,
                hintStyle: theme.textTheme.subtitle2,
                border: InputBorder.none,
              ),
            ),
          ),
          SizedBox(width: 8),
          Icon(
            widget.iconData,
            size: 16,
            color: _isFocused ? Colors.black: Colors.black,
          ),
        ],

    ),
  ),
)));

Upvotes: 0

Amita Suri
Amita Suri

Reputation: 319

Try once after making the following changes to the code:

  1. Remove the 'IntrinsicHeight' widget as the parent of Row widget.
  2. Also remove the 'textAlignVertical' property of TextField widget.

Upvotes: -1

Abhilasha
Abhilasha

Reputation: 141

Try to remove the extra textAlignVertical: TextAlignVertical.center for the text, it should be centre aligned as you have already applied crossAxisAlignment: CrossAxisAlignment.center to all the row elements.

Upvotes: 0

Lohit Rachakonda
Lohit Rachakonda

Reputation: 64

You can add a parameter contentPadding to your text field InputDecoration.

new TextField( textAlign: TextAlign.Center, decoration: new InputDecoration(hintText: "Enter Something", contentPadding: const EdgeInsets.all(20.0)) )

Upvotes: 0

Related Questions