Question 77920 in Flutter Question posted in
The official Flutter documentation can be found here.

TextField and Text on same line in flutter

I want to make something like this Desired Output in flutter. For example: I want something like this: I ___________ hereby says this (then if there’s no space left the text will move to next line) and here the _____ should be TextField where I can add my name.

I think text and TextField on the same line. I’ve tried achieving it in flutter but the TextField doesn’t works without adding Expanded or Flexible because it causes Layout error.

Alternatively if there’s a way to let user change the text by holding it or somehow like I’ve this long text in the app and I can leave it to user to change their name or dates etc. that will do too

This is my code but it looks too bad.My output

Column(
          children: <Widget>[
            Row(
              crossAxisAlignment: CrossAxisAlignment.baseline, // <--
              textBaseline: TextBaseline.alphabetic,
              children: const <Widget>[
                Text("I"),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(labelText: 'Name'),
                  ),
                ),
                SizedBox(width: 8),
                Expanded(
                  child: Text(
                      'Here the text will come and it will cover up to 10 or more lines and will have textfields in the middle somewhere like in the image.'),
                ),
              ],
            ),
          ],
        )
Tags:

2

Answers


  1. 0

    So after trying for a while, I ended with this solution. It isn’t great and you’ll need to figure out the best way to style the TextFormFields so they look okay.

    Since I constrained them to a fixed size, you’ll likely also need to set them individually to a length you find suitable. But it works as intended as far as I can tell.

    Wrap(
    crossAxisAlignment: WrapCrossAlignment.center,
    children: [
      Text("I am a "),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        width: 150,
        height: 50,
        child: TextFormField(
          decoration: InputDecoration(labelText: 'Name'),
        ),
      ),
      Text(" person who likes to "),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        width: 200,
        height: 50,
        child: TextFormField(),
      ),
      Text(" in my free time.")
    ],
  ),

    Instead of using many small SizedBoxes, I used a Container to specify padding. This leads to an output looking like this:

    wrap

    It might also be worth thinking about if it really makes sense to put TextFormFields inline with more Text from a usability perspective. In my opinion, they generally deserve their own line on a mobile device.

    Login or Signup to reply.
  2. 0

    You can use IntrinsicWidth widget to have a flexible TextField size.

    RichText(
  text: TextSpan(
    children: <InlineSpan>[
      // first part
      const WidgetSpan(child: Text("Program:  ")),
      // flexible text field
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 64),
              child: const IntrinsicWidth(
                child: TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                        isDense: true,
                        contentPadding: EdgeInsets.all(0))),
              ))),
      // last part
      const WidgetSpan(child: Text("  Index No:  ")),
      // ...
      // ...
    ],
  ),
),
    • output is like this

    output

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search