Home > Back-end >  Flutter, multiple text inside Stack
Flutter, multiple text inside Stack

Time:09-24

I have to make multiple lines "hinttext:"

so I used "Stack" for it.

        Container(
          height: 140,
          padding: EdgeInsets.only(left: 8 right: 8),
          child: Stack(
            children: [
              TextFormField(
                    ....
                    hintText: "hinttext1",
                   ),
              ),
              Expanded(
                child: Positioned(
                    top: 50,
                    left: 0,
                    child: Text(
                      "longhinttext2222222222222222222222222222222222222222",
                      style: TextStyle(
                        color: Colors.grey,
                      ),
                    )),
              ),
            ],
          ),
        )

But "hinttext2" is truncated in the middle, instead of creating a second line.

--EDIT

If hinttext2 is wrapped with Expanded, the second line is created, but positioned top: 50 is ignored.

--EDIT2

======== Exception caught by widgets library =======================================================
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Positioned(left: 0.0, top: 50.0) wants to apply ParentData of type StackParentData to a RenderObject, which has been set up to accept ParentData of incompatible type FlexParentData.

Usually, this means that the Positioned widget has the wrong ancestor RenderObjectWidget. Typically, Positioned widgets are placed directly inside Stack widgets.
The offending Positioned is currently placed inside a Column widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  RichText ← Text ← Positioned ← Expanded ← Column ← Padding ← ConstrainedBox ← Padding ← Container ← Column ← ⋯
When the exception was thrown, this was the stack: 
#0      RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5723:11)
#1      RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5739:6)
#2      RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5761:7)
#3      RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5440:5)
#4      MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6228:11)
...

CodePudding user response:

Try this-

  Container(
      height: 140,
      padding: EdgeInsets.only(left: 8 right: 8),
      child: Stack(
        children: [
          TextFormField(
                ....
                hintText: "hinttext1",
               ),
          Positioned(
                top: 50,
                left: 0,
            child: Expanded(
                child: Text(
                  "longhinttext2222222222222222222222222222222222222222",
                  style: TextStyle(
                    color: Colors.grey,
                  ),
                )),
          ),
        ],
      ),
    )

CodePudding user response:

Instead of stack, you can try with Column, because expanded only work under column or row

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextFormField(

            ),
            Expanded(
              child: Text(
                "longhinttext2222222222222222222222222222222222222222",
                style: TextStyle(
                  color: Colors.grey,
                ),
              ),
            ),
          ],
        ),

output enter image description here

  • Related