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

Answer 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(),
        ),
      ),
    ),
  ]),
);
}