How can I create a custom height text field with a suffix icon? Right now the TextField I created has alignment issues, i.e the text and suffix icon is not aligned equally:

  Widget _buildPassInput(BuildContext context) {
    return Container(
      height: 45,
      decoration: BoxDecoration(
        border: Border.all(
          color: CustomColors.primary,
        ),
      ),
      child: Center(
        child: TextField(
          controller: _passController,
          cursorColor: CustomColors.primary,
          textAlignVertical: TextAlignVertical.center,
          style: CustomTexts.search,
          keyboardType: TextInputType.text,
          autofocus: false,
          obscureText: _obscureText,
          decoration: InputDecoration(
            hintText: "Password",
            hintStyle: CustomTexts.search,
            border: InputBorder.none,
            isDense: true,
            contentPadding: EdgeInsets.all(8),
            suffix: InkWell(
              onTap: () {
                setState(() {
                  _obscureText = !_obscureText;
                });
              },
              child: Icon(
                _obscureText ? Icons.visibility : Icons.visibility_off,
                color: CustomColors.primary,
                size: MediaQuery.of(context).size.width * 0.05,
              ),
            ),
          ),
        ),
      ),
    );
  }

The default TextField height was not working for me so I need to create a custom one. The suffix icon is centered but the text is showing a little below center

CodePudding user response：

Try below code hope its help to you.I have add it prefixIcon also if you dont need then remove prefixIcon code

Refer TextFormField

CodePudding user response：

var inputBorderDecoration = OutlineInputBorder(
        borderRadius: BorderRadius.zero,
        borderSide: BorderSide(width: 1, color: Colors.black));

    double textHeight = 40;

    // define a width if you want, or let the constrains of the parent define it.
    double inputWidth = double.infinity;

    return Center(
      child: Container(
          width: inputWidth,
          height: textHeight,
          color: Colors.green.withOpacity(.2),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Flexible(
                child: TextField(
                  controller: TextEditingController(text: 'hello world'),
                  style: TextStyle(fontSize: textHeight),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.zero,
                    enabledBorder: inputBorderDecoration,
                    focusedBorder: inputBorderDecoration,
                    filled: true,
                    fillColor: Colors.red.withOpacity(.5),
                  ),
                ),
              ),
              FittedBox(
                child: InkWell(
                  onTap: () => print("touch button"),
                  child: Icon(Icons.check_circle),
                ),
              ),
            ],
          )),
    );