Reputation: 261

Adding an image background to home page

I am trying to add a background to my home page, however, it does not seem to be working. Any thoughts? I know how to add it per se, but unsure of how to structure it. I had received some advice to use a Stack, but I am unfamiliar with this method and the resources online are not clear.

Any advice on how to structure this would be appreciated.

Here is the background image code:

Widget build(BuildContext context) {
    return DecoratedBox(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("assets/startbackground.jpg"),
              fit: BoxFit.cover),
        ),

and here is the page code itself.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.orangeAccent,
        height: double.infinity,
        width: double.infinity,
        alignment: Alignment.bottomLeft,
        child: UnconstrainedBox(
          child: Padding(
            padding: const EdgeInsets.only(left: 50, bottom: 50),
            child: Container(
              height: 400,
              width: 200,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      child: Text(
                        "Text",
                        style: TextStyle(
                            fontSize: 30, fontWeight: FontWeight.w700),
                        textAlign: TextAlign.left,
                      ),
                      color: Colors.purpleAccent,
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: Container(
                      child: Text(
                        "Some Text",
                        style: TextStyle(
                            fontSize: 60, fontWeight: FontWeight.w700),
                      ),
                      color: Colors.purpleAccent,
                    ),
                  ),
                  Expanded(
                    flex: 3,
                    child: Container(
                      child: Text(
                        "Some Text",
                        style: TextStyle(
                            fontSize: 60, fontWeight: FontWeight.w700),
                      ),
                      color: Colors.teal,
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: Padding(
                      padding: EdgeInsets.all(15),
                      child: FlatButton(
                        minWidth: 200,
                        onPressed: () {},
                        child: Text(
                          "Get Started",
                          style:
                              TextStyle(color: Color(0xff7638c9), fontSize: 15),
                        ),
                        color: Colors.transparent,
                        shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.purple),
                          borderRadius: BorderRadius.circular(18.0),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Answers (3)

Baker

Reputation: 27980

It's confusing, but we don't actually need a DecoratedBox, rather a BoxDecoration (inside your container, for the decoration: argument).

Here's an example:

class BackgroundImagePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            color: Colors.orangeAccent, // this has been moved up into BoxDeco
            image: DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage(
                'https://i.pravatar.cc/300'
            )
          )
        ),
        height: double.infinity,
        width: double.infinity,
        ... <snip> ...

Upvotes: 1

KyleUSA

Reputation: 261

This ended up working. See below.

class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Stack(children: <Widget>[
          Image.asset(
            "assets/startbackground.jpg",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Scaffold(
            body: Container(
              color: Colors.transparent,
              height: double.infinity,
              width: double.infinity,
              alignment: Alignment.bottomLeft,
              child: UnconstrainedBox(
                child: Padding(
                  padding: const EdgeInsets.only(left: 50, bottom: 50),
                  child: Container(
                    height: 400,
                    width: 200,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          flex: 1,
                          child: Container(
                            child: Text(
                              "Text",
                              style: TextStyle(
                                  fontSize: 30, fontWeight: FontWeight.w700),
                              textAlign: TextAlign.left,
                            ),
                            color: Colors.transparent,
                          ),
                        ),
                        Expanded(
                          flex: 3,
                          child: Container(
                            child: Text(
                              "Some Text",
                              style: TextStyle(
                                  fontSize: 60,fontWeight: FontWeight.w700),
                            ),
                            color: Colors.transparent,
                          ),
                        ),
                        Expanded(
                          flex: 3,
                          child: Container(
                            child: Text(
                              "Some Text",
                              style: TextStyle(
                                  fontSize: 60, fontWeight: FontWeight.w700),
                            ),
                            color: Colors.transparent,
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: Padding(
                            padding: EdgeInsets.all(15),
                            child: FlatButton(
                              minWidth: 200,
                              onPressed: () {},
                              child: Text(
                                "Get Started",
                                style: TextStyle(
                                    color: Color(0xff7638c9), fontSize: 15),
                              ),
                              color: Colors.transparent,
                              shape: RoundedRectangleBorder(
                                side: BorderSide(color: Colors.purple),
                                borderRadius: BorderRadius.circular(18.0),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )
        ]);
      }
    }

Upvotes: 0

YoBo

Reputation: 2529

If the Scaffold is a child of the background image code, than I guess the Scaffold background color is hiding the image.

Set transparent background color for the Scaffold:

Scaffold(
    backgroundColor: Color.transparent,
    ...

Upvotes: 0

Adding an image background to home page

Answers (3)

Related Questions