How to make 1/3 of the image in full screen

Question

I have an image that I want to cut and display on multiple screens. I want 1 thrid image to be full screen.

So far, I can get 1/3 of the image to occupy 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 draw a bank on how to make 1/3 take up the whole screen.

Answer 1

Is not the question of how to put the data in a full-screen image Image? Also, what do you want if the aspect ratio of one third of your original image does not match the full screen format?

This, for example, displays (approximately) a third of the landscape image in full-screen portrait mode:

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

alignment: FractionalOffset.centerLeft alignment: FractionalOffset.centerRight () .