How to make 1/3 of an image take up the full screen

Question

I have an image I want to cut up and display across multiple screens. I want 1 thrid of the image to take up the whole screen.

So far I can get 1/3 of the image to take up 1/3 of the screen with:

 Widget buildBGImage(String imageName) {
    return new Container(
      decoration: new BoxDecoration(border: new Border.all()),
      constraints: new BoxConstraints.expand(),
  child: new SizedBox.expand(
      child: new ClipRect(
          clipper: new WidthClipper(currentPage),
          child: new Image.asset(
              "assets/images/$imageName",
              fit: ImageFit.fill)
      )
  ),
);

}

  class WidthClipper extends CustomClipper<Rect> {
  int section;

  WidthClipper(this.section);

  @override
  Rect getClip(Size size) {
    return new Rect.fromLTWH(
        size.width * (section / 3), 0.0, size.width / 3, size.height);
  }

  @override
  bool shouldReclip(WidthClipper oldClipper) => true;
}

but I am drawing a bank on how to make the 1/3 take up the whole screen.

Answer 1

Isn't this more a question of how to fit the image data into a fullscreen Image? Also, what do you want to happen if the aspect ratio of one-third-of-your-original-image does not fit the aspect ratio of the full screen?

This, for example, displays (roughly) the center third of the a landscape image in fullscreen portrait mode:

new Image.network(
    "https://upload.wikimedia.org/wikipedia/commons/5/5a/Monument_Valley_2.jpg",
    fit: ImageFit.fitHeight,
    alignment: FractionalOffset.center,
)

While alignment: FractionalOffset.centerLeft and alignment: FractionalOffset.centerRight display (roughly) the left and right third, respectively.