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

Issue

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

Solution

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 By – Pratham Sarankar

Answer Checked By – David Marino (FlutterFixes Volunteer)