How can i use textfield widget in a string?

Viewed 88

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.

3 Answers

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

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

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.

Related