Flutter is not drawing the background image when i use a stack wiget like this

Question

I am using flutter to make a user dashboard and when I try to get the black box over the background it only draws part of the background being the part that has writing and nothing else.

The aim is to have the box over the background and the epsilon aio writing. I am new the flutter so excuse any mal practice perforned



import 'package:epsilon_gui/screens/home/dashboard/dashboard_screen.dart';
import 'package:epsilon_gui/screens/home/main_components/sideMenu.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';


class MainScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child:  Row(
          children: [
            Container(
              alignment: Alignment.centerLeft,
              width: 140,
              child: SideMenu(color: Colors.grey.shade800,),
              ),
              DashboardScreen(),


            // Container(
            //     child: DashboardScreen()
            //
            // ),
          ],
        ),
      )
    );

  }


}


import 'package:flutter/material.dart';

class DashboardScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return SafeArea(
      child: Stack(
        children: [
          background(),
          Container(
            height: 100,
            width: 100,
            color: Colors.black,
          ),

      ],

      ),
    );
  }
  Container background() {
    return Container(
      child: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/gui back--.jpg"),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            alignment: Alignment.bottomLeft,
            child: Text("EPSILON AIO",
                style: TextStyle(fontSize: 150,
                    fontFamily: 'Audiowide',
                    color: Colors.grey.withOpacity(0.5)
                )
            ),
          ),
        ],
        //
      ),
    );
  }
}

score 0 · Answer 1 · answered Aug 30 '22 at 10:46

you need to wrap the two children in the stack with positioned widget and give them top,bottom,right,left properties , this will solve it.

example :

Positioned( top : 0 , // space between top and the child bottom : 0 ,// space between bottom and the child right : 0 , //space between right and the child right : 0 , //space between right and the child child : )

// change the top,bottom,right,left numbers depending on your design

Flutter is not drawing the background image when i use a stack wiget like this

1 Answers1