How to layer a PNG image over a background color in Flutter?

Question

I want to display a PNG image on top of a solid background color in Flutter. My desired result looks like this:

Currently, my code renders like this:

:

Here's the relevant code I'm using:

class LogIn extends StatefulWidget {


  @override
  State<LogIn> createState() => _LogInState();
}

class _LogInState extends State<LogIn> {
  bool isAPIcallProcess = false;
  bool hidePassword = true;
  GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();
  String? username;
  String? password;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("lib/img/pomodoro.png"),
              fit: BoxFit.cover

            )
        ),
        child: Scaffold(
          backgroundColor: Color(0xffF24004),
          body: ProgressHUD(
            child: Form(
              key: globalFormKey,
              child: _LogInUI(context),
            ),
            inAsyncCall: isAPIcallProcess,
            opacity: 0.3,
            key: UniqueKey(),
          ),
          appBar: AppBar(
            backgroundColor: Color(0xff0067FE),
            title: Center(
              child: Text("P O M O D O N E", style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 30,
                color: Color(0xffF3F5F4),
              ),),
            ),
          ),
        ),
      ),
    );
  }


  Widget _LogInUI(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: MediaQuery
                .of(context)
                .size
                .width,
            height: MediaQuery
                .of(context)
                .size
                .width,
            decoration: const BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.transparent,
                      Colors.transparent
                    ])
            ),
          )
        ],
      ),
    );
  }
}

I've added my image to the pubspec.yaml file, but it's not displaying correctly. Can someone explain how to achieve the correct image layering in Flutter?

pubspec.yaml

  # To add assets to your application, add an assets section, like this:
  assets:
    - lib/img/pomodoro.png

  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Answer 1

Here is the code to achieve the bottom

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: (){},
    child: Icon(Icons.check, color: Colors.white,),
    backgroundColor: Colors.blue,
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  body: Container(
    decoration: const BoxDecoration(
      //if you want color as background
      color: Color(0xffF24004)
      //if you want to show image as background
      // image: DecorationImage(
      //     fit: BoxFit.fill,
      //   image: const NetworkImage("your background url")//add your url here for background
      // )
      ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Spacer(),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("PROMODONO", style: TextStyle(color: Colors.white,fontWeight: FontWeight.w800),),
          ],
        ),
        SizedBox(height: 20,),
        SizedBox(
            width: 200,
            height: 200,
            child: FittedBox(
                fit: BoxFit.fill,
                child: Image.network("your url")//add your image url if its from network if not change it to image.asset
            )
        ),

        const Spacer(flex: 3,),
      ],
    ),
  ),
);