Styling color with opacity does not work when using the Material () or Scaffold () widget

Viewed 703

Defines a background image that will be applied to all screens in the layout, according to the code below.

class _LoginWidgetState extends State<LoginWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Image.asset(
            "assets/img/NewYorkCity.jpeg",
            fit: BoxFit.cover,
          ),
          PageView(
            children: <Widget>[
              SignUpPageWidget(),
              LoginPageWidget(),
              SignInPageWidget(),
            ],
          )
        ],
      ),
    );
  }
}

And the layout with the Material and Scaffold widgets is not applied stylization color: Colors.white.withOpacity(0.8) and, therefore, the background image is not displayed. The screen is white, as opacity has not been applied to the background.


class _SignUpPageWidgetState extends State<SignUpPageWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white.withOpacity(0.9),
        padding: EdgeInsets.symmetric(horizontal: 40),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.local_taxi,
              size: 50,
              color: Theme.of(context).accentColor,
            ),
            Container(
              width: double.infinity,
              child: Text(
                "Already have an account?",
                textAlign: TextAlign.center,
                style: TextStyle(
                  decoration: TextDecoration.none,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                  color: Theme.of(context).accentColor,
                ),
              ),
            ),
            CircleButton(
              label: "Sign Up",
            )
          ],
        ),
      ),
    );
  }
}

is not applied stylization

Removing the Scaffold or Material widget, the color: Colors.white.withOpacity (0.8) stylization is applied.


class _SignUpPageWidgetState extends State<SignUpPageWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white.withOpacity(0.9),
      padding: EdgeInsets.symmetric(horizontal: 40),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            Icons.local_taxi,
            size: 50,
            color: Theme.of(context).accentColor,
          ),
          Container(
            width: double.infinity,
            child: Text(
              "Already have an account?",
              textAlign: TextAlign.center,
              style: TextStyle(
                decoration: TextDecoration.none,
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
          CircleButton(
            label: "Sign Up",
          )
        ],
      ),
    );
  }
}

stylization is applied

Would you know how to use the Scaffold and Material widgets by applying this stylization?

1 Answers

Add backgroundColor: Colors.transparent to your Scaffold widget

For Material add type:MaterialType.transparency

Related