CODEWITHSUNDEEP
flutterdartmobileflutter-layout
malozyali - Yalçın
malozyali - Yalçın

Reputation: 19

How can i use textfield widget in a string?

I want to use textfield or textformfield in a String. Ex: Beautiful ____ flutter. String value can have more than one word. How can i do that?

Thanks.

Upvotes: 1

Views: 149

Answers (3)

Developer Extraordinare
Developer Extraordinare

Reputation: 605

I think the RichText widget is the going to give the best solution. Unfortunately I could only get it to work with a single line of text. Once the inputed text gets too long it forces the TextField onto its own line.

    RichText( 
      text: const TextSpan(
        text: 'Beautiful ',
        children: [
          WidgetSpan(
            child: IntrinsicWidth(
              child: TextField(
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(bottom: 3.0),
                    isDense: true,
                    hintText: '     ',
                  ),
                  keyboardType: TextInputType.multiline,
                  maxLines: null),
            ),
          ),
          TextSpan(text: ' flutter'),
        ],
      ),
    )

Note: Edited to answer the question with a TextField instead of a TextSpan widget

Upvotes: 1

il_boga
il_boga

Reputation: 1513

Well, guess I was wrong. I commented saying this was impossible, but it was simply me not knowing the right widget for the job, which is WidgetSpan. Extending what @developer extraordinare said, you can put WidgetSpan in the TextSpan tree inside a RichText widget, like this:

@override
  Widget build(BuildContext context) {
    return Material(
        child: RichText(
          text: TextSpan(
            text: 'Beautiful',
            children: [
              WidgetSpan(child: TextFormField()),
              const TextSpan(text: ' flutter'),
            ],
          ),
        ),
      
    );
  }

almost live example from dartpad

The results probably aren't as nice as you'd like, but it gets the job done. You probably have just to fiddle with SizedBox, constraints and the such to make the editable TextFormField fit nicely in the text.

Upvotes: 1

Roaa
Roaa

Reputation: 1440

You can use a Row like so

Row(
  children: [
    Expanded(
      child: Text(
        '..',
        overflow: TextOverflow.visible,
        maxLines: 1,
      ),
    ),
    Expanded(child: TextFormField(/*...*/)),
    Expanded(
      child: Text(
        '..',
        overflow: TextOverflow.visible,
        maxLines: 1,
      ),
    ),
  ],
),

Upvotes: 1

Related Questions