Estoy intentando establecer una imagen de fondo para la página de inicio. Obtengo el lugar de la imagen desde el inicio de la pantalla y llevo el ancho pero no el alto. ¿Me falta algo en mi código? ¿Existen estándares de imagen para el aleteo? ¿Las imágenes se escalan según la resolución de pantalla de cada teléfono?
class BaseLayout extends StatelessWidget{
@override
Widget build(BuildContext context){
return new Scaffold(
body: new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
new Image.asset("assets/images/bulb.jpg")
]
)
)
);
}
}
Respuestas:
No estoy seguro de haber entendido su pregunta, pero si desea que la imagen ocupe toda la pantalla, puede usar
DecorationImage
un ajuste deBoxFit.cover
.Para su segunda pregunta, aquí hay un enlace a la documentación sobre cómo insertar imágenes de activos dependientes de la resolución en su aplicación.
fuente
constraints: BoxConstraints.expand()
DecorationImage(image: Image.network("http://example.com/image.jpg").image, ...)
width: double.infinity
al contenedor con la imagen.Si usa a
Container
como cuerpo delScaffold
, su tamaño será en consecuencia el tamaño de su hijo y, por lo general, eso no es lo que desea cuando intenta agregar una imagen de fondo a su aplicación.Mirando esta otra pregunta, @ collin-jackson también sugirió usar en
Stack
lugar deContainer
como el cuerpo delScaffold
y definitivamente hace lo que quieres lograr.Así es como se ve mi código
fuente
Puede utilizar
DecoratedBox
.Salida:
fuente
Puede utilizar
Stack
para hacer que la imagen se extienda a la pantalla completa.Nota: Opcionalmente si estás usando un
Scaffold
, puedes poner elStack
interiorScaffold
con o sinAppBar
según tus necesidades.fuente
ShaderMask
, por lo tanto no funcionaría poner unimage:
nombre.Pude aplicar un fondo debajo de
Scaffold
(e incluso lo esAppBar
) colocandoScaffold
debajo de aStack
y configurando aContainer
en la primera "capa" con el conjunto de imágenes de fondo y lafit: BoxFit.cover
propiedad.Tanto el
Scaffold
yAppBar
debe tener elbackgroundColor
conjunto comoColor.transparent
y elelevation
deAppBar
debe ser 0 (cero).¡Voilà! ¡Ahora tienes un bonito fondo debajo de todo el Scaffold y AppBar! :)
fuente
Podemos usar Container y marcar su altura como infinito
Salida:
fuente
esto también funciona dentro de un contenedor.
fuente
Para establecer una imagen de fondo sin encoger después de agregar al niño, use este código.
fuente
fuente