title: Flutter : How to develop widgets on scaffold that have background image and safeArea?
body: <p><a href="https://i.stack.imgur.com/Uhvbz.png" rel="nofollow noreferrer">Screen That I want to develop</a></p>
  <p>I'm new in Flutter Basically, I want to add these images on a top-off background like boxes is there any way to do this and screen be responsive on multiple devices this is what I start to do but it seems to be complex for me</p>
  <pre><code>import 'package:flutter/material.dart';
  
  class HomeScreen extends StatelessWidget {
    const HomeScreen({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Stack(
          children: &lt;Widget&gt;[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(&quot;assets/images/background.png&quot;),
                  fit: BoxFit.cover,
                  colorFilter: ColorFilter.mode(
                      Colors.black.withOpacity(0.75), BlendMode.darken),
                ),
              ),
            ),
            SafeArea(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    child: Image.asset(
                      &quot;assets/images/72.png&quot;,
                      fit: BoxFit.cover,
                    ),
                  ),
                ],
              ),
            ),
  
          ],
        ),
      );
    }
  }
  </code></pre>