I want to make the SvgPicture take full width and height. Here is the current solution.

I have currently used double.infinity for width and height. However, I want to make it use the LayoutBuilder's constraints to make the image full width and height.

LayoutBuilder(
                builder: (layoutBuilderContext, constraints) {                  
                  return Stack(
                    children: [
                      SvgPicture.asset(
                        'assets/images/welcome/bg-welcome-screen.svg',
                        fit: BoxFit.cover,
                        width: double.infinity,
                        height: double.infinity,
                      ),
                  ]),
              })

However, that is not able to happen using constraints.maxWidth and constraints.maxHeight for sizing the SvgPicture. It takes full height but failes to take full width.

How can I size the image to full width without using double.infinity if possible. I really want it to take the full screen width and height as it is a background image for the app.

CodePudding user response：

To take full size of stack use Positioned.fill, And to size the Stack widget, wrap Stack with SizedBox

  SizedBox(
   width: constraints.maxWidth,
   height:constraints.maxHeight, 
    child: Stack(
      children: [
        Positioned.fill(
          child: Text(""),
        ),
      ],
    ),
  ),

It is better to use LayoutBuilder on top level widget like scaffold's body for getting body size.

More about Stack

CodePudding user response：

Have you tried using BoxFit.fill? That will fill the target width and height by distorting the image's original aspect ratio.