How can I create a widget with a semi-transparent background and an opaque foreground?

I suppose you'd not need a stack to achieve it. You can directly specify the background by specifying the decoration for your widget.

Example:

new Container(
            decoration: new BoxDecoration(
              border: new Border.all(width: borderWidth ,color: Colors.transparent), //color is transparent so that it does not blend with the actual color specified
              borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
              color: new Color.fromRGBO(255, 0, 0, 0.5) // Specifies the background color and the opacity
            ),
          child: _content,
        )

Hope that helped!


if you want to use Colors.grey (instead of using its RGB equivalent via Colors.fromRGBO),

you can specify color: Colors.grey.withOpacity(0.5)