How do I create this page?

Question

I want to create a page like this image.Scaffold does not have this capability.image full screen

You meant Scaffold itself I guess. It is a simple page with a button on a background image. You can add a Container with BoxDecoration with image: AssetImage(...) and BoxFit.cover. Container.child would have your button. — Cetin Basoz, May 13 '21 at 15:48

score 1 · Answer 1 · answered May 13 '21 at 15:56

you can use Scaffold with DecorationImage to apply background and a stack to place logo on top of image

Scaffold(
        body: Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage("https://picsum.photos/200/300"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Text(
            "Logo",
            style: TextStyle(
                color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30),
          ),
        )
      ],
    ))

score 0 · Accepted Answer · answered May 13 '21 at 16:38

You need to use stack widget here to make the same thing. Here is my code.

Widget build(BuildContext context) {
final wi = MediaQuery.of(context).size.width;
return Material(
  child: Scaffold(
      body: Stack(
    children: [
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
                "https://i.ibb.co/sgjfh62/af8d63a477078732b79ff9d9fc60873f.jpg"),
            fit: BoxFit.cover,
          ),
        ),
      ),
      Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Image.network("https://i.ibb.co/ZcvF9VF/5.png"),
            Text(
              "Logo",
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 30),
            ),
            Text(
              "Logo",
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 14),
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              decoration: BoxDecoration(
                  color: Colors.blueAccent,
                  borderRadius: BorderRadius.circular(10)),
              child: Padding(
                padding: EdgeInsets.all(18.0),
                child: Text('button'),
              ),
            )
          ],
        ),
      )
    ],
  )),
);
}

It is demo, do you need exact code what you want?? just wrap the container with Inkwell or gestureDetector widget! — Salim Murshed, May 13 '21 at 17:23
Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery — ramsin2005, May 14 '21 at 07:51
https://stackoverflow.com/questions/56446363/mediaquery-of-called-with-a-context-that-does-not-contain-a-mediaquery, you need to research more. — Salim Murshed, May 14 '21 at 09:32

How do I create this page?

2 Answers2