CODEWITHSUNDEEP
flutterdart
genericUser
genericUser

Reputation: 7128

Flutter adding icon right after a long text

I want to add a tapable icon right after a long text. I need to use Text widget since I'm using textDirection and maxLines params.

Any ideas?

The problem: enter image description here

What I need to get: enter image description here

Upvotes: 1

Views: 3315

Answers (4)

Hans
Hans

Reputation: 27

There is a EasyRichText Widget to do this.

https://medium.com/p/865b8771328d

var text = "This is my text, my text takes more than one line, I want to present my Icon at the end of this text";

EasyRichText(
  text,
  patternList: [
    EasyRichTextPattern(
      targetString: text,
      suffixInlineSpan: WidgetSpan(
        child: Icon(Icons.error_outline),
      ),
    )
  ],
),

Upvotes: 0

Andrew Garcia
Andrew Garcia

Reputation: 114

enter image description hereUse a stack, let me show you...

Container(//Stack Widget needs space to work so be sure to add a container that gives it
    width: double.infinity, //this makes the container match with the screen width
    height: 200,
    color: Colors.red,
    child: Stack(
      children: [
        Positioned(//This widget gives position to your button
            top: 100,//This will create a space on top
            left: 0,//This will create a space on left
            child: Container(//Your Container and text widget here
              margin: EdgeInsets.only(left: 100),
              height: 100,
              width: 200,
              color: Colors.blue,
              child: Text(
                  "This is my text, my text takes more than one line, I want to present my Icon at the end of this text"
              ),
            )
        ),
        Positioned(
            top: 140,
            left: 150,
            child: IconButton(//Put here your icon widget
              iconSize: 30,
              icon: Icon(CupertinoIcons.arrow_left_circle_fill),
              color: Colors.blue,
            )
        ),
      ],
    ),
  )

Upvotes: 0

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63594

as Karen said it we need to use RichText.

 Text.rich(
        TextSpan(
            text:
                "I want to add a tapable icon right after a long text. I need to use Text widget since I'm using textDirection and maxLines params.",
            children: [
              WidgetSpan(
                child: Icon(
                  Icons.error_outline,
                  color: Colors.red,
                ),
              ),
            ]),
      ),

Upvotes: 3

Varad Gauthankar
Varad Gauthankar

Reputation: 105

the one way is to get char code of an icon, take a look at this answer for more details.

https://stackoverflow.com/a/63479589/10127437

Upvotes: 0

Related Questions