How to make suffix icon appear at the start of the text area? [Flutter]

Question

This is my code:

TextField(
    key: controller.encryptedTextKey,
    readOnly: true,
    keyboardType: TextInputType.multiline,
    textInputAction: TextInputAction.newline,
    maxLines: null,
    controller: controller.encryptedTextController,
    decoration: InputDecoration(
    hintText: 'text_cryption_encrypted_message_hint'.tr,
    hintMaxLines: 2,
    suffixIcon: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
           onPressed: controller.onSaveEncryptedToClipboard,
           icon: Icon(Icons.copy),
        ),
        IconButton(
            onPressed: controller.onPasteEncryptedFromClipboard,
            icon: Icon(Icons.paste),
         ),
      ],
    ),
  ),
),

What I have is this:

What I want is this:

How can I make this happen? The problem is that the Row's height is not the same as the TextField's height. The Row's height only covers the icons. But when I try height: double.infinity or Expanded(), I get errors. Maybe it's because the icons are kind of "floating" behind the TextField.

Answer 1

Try with a below code snippet that has prefix and sufixicon in a textformField

Don't Forget to make necessary changes as per requirment

Create a Textfield widget like a below:

import 'package:flutter/material.dart';
import 'package:row_nation/Utils/app_colors.dart';
import 'package:row_nation/Utils/app_font_size.dart';
import 'package:row_nation/Utils/app_font_weight.dart';



class PassWordTextFormFieldWidget extends StatelessWidget {
final TextEditingController controllerName;
final String hintTxt;
final TextInputType keyboardType;
final Color cursorColor;
final Function(String) onChange;
final Function(String) onSaved;
final String? Function(String?)? validatorData;
final IconData prefixIcon;
final IconData suffixIcon;
final Function() sufficIconTap;
PassWordTextFormFieldWidget({
super.key,
required this.controllerName,
required this.hintTxt,
required this.prefixIcon,
required this.keyboardType,
required this.cursorColor,
required this.onChange,
required this.onSaved,
required this.validatorData,
required this.suffixIcon,
required this.sufficIconTap,
});
@override
Widget build(BuildContext context) {
double? height, width;
height = MediaQuery.of(context).size.height;
width = MediaQuery.of(context).size.width;
return Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: AppColors.kEmptyDotColor.withOpacity(0.4),
),
child: TextFormField(
controller: controllerName,
cursorColor: cursorColor,
obscureText: true,
textAlign: TextAlign.left,
keyboardType: keyboardType,
style: Theme.of(context).textTheme.caption?.copyWith(
      color: AppColors.kWhiteColor,
      letterSpacing: 0.2,
      fontSize: AppFontSize.fourteenFontSize,
      fontWeight: AppFontWeight.sixHundredFont,
    ),
validator: (value) {
  // widget.validatorData!(value);

  return validatorData!(value);
},
onChanged: (va) {
  onChange(va);
},
onSaved: (val) {
  print(val);
},
decoration: InputDecoration(
  contentPadding: EdgeInsets.symmetric(
    horizontal: 15,
    vertical: 15,
  ),
  isDense: true,
  hintText: hintTxt,
  hintStyle: Theme.of(context).textTheme.caption?.copyWith(
        color: AppColors.kIconColor,
        fontSize: AppFontSize.twelveFontSize,
        fontWeight: AppFontWeight.fourHundredFont,
      ),
  // When user gets Error

  errorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(
      color: AppColors.kRedColor,
    ),
  ),

  //  When user getting error and focuses on a textformfield
  focusedErrorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(
      color: AppColors.kRedColor,
    ),
  ),
  //  When user Focuses on textformField widget
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(
      color: AppColors.kSplashBackColor,
    ),
  ),

  //   Default TextformField Color
  enabledBorder: InputBorder.none,

  suffixIcon: GestureDetector(
    onTap: () {
      sufficIconTap();
    },
    child: Icon(
      suffixIcon,
      size: 15,
      color: AppColors.kIconColor,
    ),
  ),

  prefixIcon: Icon(
    prefixIcon,
    size: 15,
    color: AppColors.kIconColor,
  ),

  // border: InputBorder.none,
),
),
);
}
}

and use it like a below

          PassWordTextFormFieldWidget(
          controllerName: passwordController,
          prefixIcon: Icons.lock,
          suffixIcon: Icons.visibility_off,
          sufficIconTap: () {
            print("Visibility Icon Tapped");
          },
          hintTxt: AppStrings.passwordTxt,
          keyboardType: TextInputType.text,
          cursorColor: AppColors.kSplashBackColor,
          onChange: (p0) {},
          onSaved: (p0) {},
          validatorData: (p0) {},
          ),

Answer 2

Use suffix: instead of suffixIcon for Row.

suffix: Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [

While the suffix is not always visible, you can use this.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Expanded(
      child: TextField(
        keyboardType: TextInputType.multiline,
        textInputAction: TextInputAction.newline,
        maxLines: null,
        decoration: InputDecoration(
          hintText: 'text_cryption_encrypted_message_hint',
          hintMaxLines: 2,
        ),
      ),
    ),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.copy),
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.paste),
        ),
      ],
    )
  ],
),