Tengo una imagen que quiero cortar y mostrar en varias pantallas. Quiero que 1 tercio de la imagen ocupe toda la pantalla.
Hasta ahora puedo hacer que 1/3 de la imagen ocupe 1/3 de la pantalla con:
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; }pero estoy dibujando un banco sobre cómo hacer que el 1/3 ocupe toda la pantalla.
¿No es esto más una cuestión de cómo encajar los datos de la imagen en una Image de pantalla completa? Además, ¿qué quiere que suceda si la relación de aspecto de un tercio de su imagen original no se ajusta a la relación de aspecto de la pantalla completa?
Esto, por ejemplo, muestra (aproximadamente) el tercio central de una imagen horizontal en modo retrato a pantalla completa:
new Image.network( "https://upload.wikimedia.org/wikipedia/commons/5/5a/Monument_Valley_2.jpg", fit: ImageFit.fitHeight, alignment: FractionalOffset.center, ) Mientras que la alignment: FractionalOffset.centerLeft y la alignment: FractionalOffset.centerRight muestran (aproximadamente) el tercio izquierdo y derecho, respectivamente.