Trying to get full View Port Background Images Using BoxFit with Carousel

[ez...@sightworks.com]

I am using the following code to pull three images into a carousel and display as background images using PageView. The problem I'm having is that I can't get the images to span the whole viewport. Depending on the image dimensions, they either go fully vertical and have white space in the left and right margins, or vice versa. 

The solutions I've tried include adding height and width properties within the mapped Images, adding a "fit: Boxfit.cover" statement at the top level of the SizedBox, and using FittedBox rather than SizedBox. 

My experiments with changing the height and width of mapped images showed me that even with maxed out values, they still behaved in the same way, whereas shrinking them down to sizes smaller than the viewport (e.g. height: 100.0) did successfully change them. So my conclusion is that the problem is the container. There is some kind of automatic resizing that happens, and I think it's caused by SizedBox, but I don't know how to update it, since width and height parameters are designated with pixels, whereas in ordinary css I would use 100VW / 100VH. 

Widget testBGCarousel = new FittedBox(
  fit: BoxFit.cover,
  child: new Carousel(
    children: [
      new AssetImage('images/img1.jpg'),
      new AssetImage('images/img2.jpg'),
      new AssetImage('images/img3.jpg'),
    ].map((bgImg) => new Image(image: bgImg)).toList(),
  ),
);

return new MaterialApp(
  title: 'Flutter Demo',
  home: new Scaffold(
    body: new Stack (
      children: <Widget>[
        new PageView(
          children: [testBGCarousel],
        ),
        new ListView(
          children: [
            style360Logo,
            titleTextSection,
            subtitleTextSection,
            getStartedButton(),
          ],
        )
       ]
    ),
    bottomNavigationBar: footer,
  ),
);

[Chema Molins]

The problem might be that FittedBox fits the Carousel but not the images.

Does it help if you make the FittedBox widget parent of the images or use the fit: BoxFit.cover property in a new Image.asset() constructor?

Maybe something along these lines:

Widget testBGCarousel = new Carousel(

    children: [
      new AssetImage('images/img1.jpg'),
      new AssetImage('images/img2.jpg'),
      new AssetImage('images/img3.jpg'),

    ].map((bgImg) => new FittedBox(
 fit: BoxFit.cover,
 child: new Image(image: bgImg))).toList(),
  ),
);

or

  

Widget testBGCarousel = new Carousel(
    children: [
      'images/img1.jpg',
      'images/img2.jpg',
      'images/img3.jpg',
    ].map((img) => new Container(
 child: new Image.asset(img, fit: BoxFit.cover)).toList(),
  ),
);

[ez...@sightworks.com]

Thank you Chema, 

Yes this was the correct solution.