i'm stuck trying to design a text widget that have empty Text Field like below:

If you have an idea how to do this, I would be grateful

CodePudding user response：

You can use rich text to achieve this

RichText(
        text: TextSpan(
         children: [
           TextSpan(text: "some really big text which will have a textfield like this"),
           WidgetSpan(child: Container(
             width: 100,
             decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
               color: Colors.orange
             ),
             child:TextField(
               style:TextStyle(fontSize:12))
           )),
           TextSpan(text:" to enter some text in between a text"),
         ]
        )
      )

You may have to align items. But this should work

CodePudding user response：

Center(
        child: RichText(
          text: TextSpan(
              text:
                  'Grout crack happens mainly due to movement between two surfaces. It can be as a ',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 40,
                  fontWeight: FontWeight.bold),
              children: [
                TextSpan(
                    text: 'thin',
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 35,
                        fontStyle: FontStyle.italic)),
                TextSpan(
                    text: ' of humidity',
                    style: TextStyle(color: Colors.black, fontSize: 40)),
              ]),
        ),
      ),