Flutter: why is a Positioned widget transparent over a TextField?

Question

Why is the Positioned red widget transparent, so that the Second Label Text widget can be seen through it?

Setup: Column:

Stack
- TextField
- Positioned
  - Red Container
TextField (Second Label Text)

The intention is that the red widget covers in an opaque way the text field below it.

Thanks

@override
  Widget build(BuildContext context) {
    const pad = 16.0;
    const vertPadding = 10.0;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(children: [
        Stack(clipBehavior: Clip.none, children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0),
            child: TextField(
              autocorrect: false,
              maxLines: null,
              decoration: InputDecoration(
                border: _border,
                labelText: "Label text",
                labelStyle: TextStyle(color: Colors.grey),
              ),
            ),
          ),
          Positioned(
            top: pad,
            left: pad,
            width: 200.0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.red,
              ),
              width: 200,
              height: 84,
              child: Padding(
                padding:
                    const EdgeInsets.fromLTRB(16, vertPadding, 0, vertPadding),
                child: Container(),
              ),
            ),
          ),
        ]),
        Padding(
          padding: const EdgeInsets.fromLTRB(25, 0, 25, 0),
          child: TextField(
            decoration: InputDecoration(
              border: _border,
              labelText: "Second Label text",
            ),
          ),
        )
      ]),
    );
  }

  final OutlineInputBorder _border = OutlineInputBorder(
    borderRadius: BorderRadius.circular(4.0),
    borderSide: BorderSide(
      color: Colors.grey,
      width: 1.0,
    ),
  );

Yeah I tried that, same result. I even added a DecorationImage as decoration, an opaque image, same thing. — johnnyMac, Jul 31 '21 at 01:34

score 1 · Accepted Answer · answered Jul 31 '21 at 00:49

1

Did you think why first text field is behind red box and second text field is above the red box? It is because of their indexes in the widget list of stack.

Your widget tree is wrong. The parent widget should be stack, it's first child should be column of two text field and second child will be the red box, which you want. Try below code and let me know in comment.

@override
Widget build(BuildContext context) {
const pad = 16.0;
const vertPadding = 10.0;

return Scaffold(
  appBar: AppBar(
    title: Text(""),
  ),
  body: Stack(clipBehavior: Clip.none, children: [
    Column(
      children: [
        Padding(
          padding:
              const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0),
          child: TextField(
            autocorrect: false,
            maxLines: null,
            decoration: InputDecoration(
              border: _border,
              labelText: "Label text",
              labelStyle: TextStyle(color: Colors.grey),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(25, 0, 25, 0),
          child: TextField(
            decoration: InputDecoration(
              border: _border,
              labelText: "Second Label text",
            ),
          ),
        )
      ],
    ),
    Positioned(
      top: pad,
      left: pad,
      width: 200.0,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        width: 200,
        height: 84,
        child: Padding(
          padding:
              const EdgeInsets.fromLTRB(16, vertPadding, 0, vertPadding),
          child: Container(),
        ),
      ),
    ),
  ]),
);
}

answered Jul 31 '21 at 00:49

Pratham Sarankar

555
6
10

Thanks for the answer, but no, the widget tree is correct. In this real world app, there are multiple widgets in a column, and one of those widgets is a stack. After the stack, the next widget can be anything, and the Positioned child of the stack should not be transparent in its overflowing part. If you replace the stack's sibling (the second text field) with a container, the Positioned widget will not be transparent, and will cover opaquely this container. This only happens if the immediate sibling of the stack is a TextField. – johnnyMac Jul 31 '21 at 01:43
1

Yes, stack will allow the widgets to overflow, you are right, and it can be placed in column, obviously. But in your case if you make stack your parent widget it can be easy. Did you achieve what you wanted? – Pratham Sarankar Jul 31 '21 at 01:47
From my app's design pov, the other widgets after the stack are not supposed to be part of the stack, they are supposed to be placed vertically one after another. This would be cumbersome to be achieved with a stack, that's a column's job. – johnnyMac Jul 31 '21 at 01:55
2

@johnnyMac "This only happens if the immediate sibling of the stack is a TextField." no it doesnt. If you use a colored `Container` exactly where the second textfield is, it will still cover the red box. Pratham is right about your widget tree – PatrickMahomes Jul 31 '21 at 02:29
@johnnyMac if you want to control z-axis ordering, try using a second `Stack` around your current `Column` and `Stack` – PatrickMahomes Jul 31 '21 at 02:31
@PatrickMahomes - my bad, I shouldn't have said "If you replace the stack's sibling (the second text field) with a container, the `Positioned` widget will not be transparent, and will cover opaquely this container." In fact any widget after the stack should cover the Positioned element. It's just that this doesn't happen when that widget is a text field, the `Positioned` widget covers the text field transparently, probably a bug. – johnnyMac Jul 31 '21 at 15:32

Flutter: why is a Positioned widget transparent over a TextField?

1 Answers1