Home > Software engineering >  How to set a background color for a widget inside a main widget in Flutter?
How to set a background color for a widget inside a main widget in Flutter?

Time:11-23

I have a Container widget in which all my codes are in for the particular page. It has a background image and inside the container, there is a Center widget. I want to set the background color of the center widget to white but while doing so, the entire screen's background is changing to white. How can I achieve that please?

return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('Assets/images/loginbg2.jpg'),
          fit: BoxFit.cover
        ),
      ),
    child: Scaffold(
      backgroundColor: Colors.transparent, //code for background image



body: Center(
        child:Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Padding(
                padding: EdgeInsets.fromLTRB(40, 0, 0, 0),
                child: Text(
                  "Welcome back!",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              )
            ),
            SizedBox(
              height: 20.0,
            ), //code for center widget

CodePudding user response:

This is probably because the Column widget inside your Center widget is taking up the entire screen.

A Column widget (unless constrained) is taking up all the space it can get.

Try solving your issue by removing the Column widget for now and only use the container inside the Center widget and define it's height and width. See if the background you want is coming back in view.

  • Related