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

user_10303436 0
Viewed 199

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:

enter image description here

What I want is this:

enter image description here

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.

flutter-layout flutter
1 Answers

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),
        ),
      ],
    )
  ],
),
user_101571270
Related