Flutter SDK Establecer imagen de fondo

122

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") 
          ]
        )
      )
    );
  }
}
Arun Kumar
fuente
¿Cuál debería ser el tamaño de la imagen? ancho * alto?
ArgaPK
¿Alguien puede dar un ejemplo con la llamada de imagen de red
The Dead Guy
1
@TheDeadGuy Image.network (' example.com/path/to/image.jpg' )?
SacWebDeveloper
Solución de pago aquí en este enlace stackoverflow.com/a/62245570/9955978
Shubham Sharma
Ninguno de los comentarios mencionados ayudó en mi caso, no preguntes por qué. Aquí hay un enlace útil con explicaciones: educity.app/flutter/…
boldnik

Respuestas:

332

No estoy seguro de haber entendido su pregunta, pero si desea que la imagen ocupe toda la pantalla, puede usar DecorationImageun ajuste de BoxFit.cover.

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null /* add child content here */,
      ),
    );
  }
}

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.

Collin Jackson
fuente
8
Esto funciona siempre que no tenga ningún hijo. Si agrega un hijo, el tamaño del contenedor se reduce al tamaño de su hijo. ¿Sabes cómo hacer que el contenedor llene toda la pantalla sin importar el tamaño de su hijo?
HyLian
@ColinJackson ¿cuál debería ser el tamaño de la imagen? ancho * alto?
ArgaPK
4
@HyLian establece la propiedad de restricciones del contenedor,constraints: BoxConstraints.expand()
Rustem Kakimov
2
Para la imagen de red, se puede utilizarDecorationImage(image: Image.network("http://example.com/image.jpg").image, ...)
Eugene Gr. Philippov
@HyLian agrega width: double.infinityal contenedor con la imagen.
jkoech
45

Si usa a Containercomo cuerpo del Scaffold, 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 Stacklugar de Containercomo el cuerpo del Scaffoldy definitivamente hace lo que quieres lograr.

Así es como se ve mi código

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Stack(
      children: <Widget>[
        new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(image: new AssetImage("images/background.jpg"), fit: BoxFit.cover,),
          ),
        ),
        new Center(
          child: new Text("Hello background"),
        )
      ],
    )
  );
}
HyLian
fuente
¿Cuál debería ser el tamaño de la imagen? ancho * alto?
ArgaPK
5
Abrir el teclado cambia el tamaño de la imagen. ¿Qué se puede hacer para eso?
Michael Hathi
15

Puede utilizar DecoratedBox.

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
    ),
    child: Center(child: FlutterLogo(size: 300)),
  );
}

Salida:

ingrese la descripción de la imagen aquí

CopsOnRoad
fuente
11

Puede utilizar Stackpara hacer que la imagen se extienda a la pantalla completa.

Stack(
        children: <Widget>
        [
          Positioned.fill(  //
            child: Image(
              image: AssetImage('assets/placeholder.png'),
              fit : BoxFit.fill,
           ),
          ), 
          ...... // other children widgets of Stack
          ..........
          .............
         ]
 );

Nota: Opcionalmente si estás usando un Scaffold, puedes poner el Stackinterior Scaffoldcon o sin AppBarsegún tus necesidades.

Shubhamhackz
fuente
Exactamente lo que necesitaba, en mi caso mi imagen está dentro de un ShaderMask, por lo tanto no funcionaría poner un image:nombre.
Soon Santos
5

Pude aplicar un fondo debajo de Scaffold(e incluso lo es AppBar) colocando Scaffolddebajo de a Stacky configurando a Containeren la primera "capa" con el conjunto de imágenes de fondo y la fit: BoxFit.coverpropiedad.

Tanto el Scaffoldy AppBardebe tener el backgroundColorconjunto como Color.transparenty el elevationde AppBardebe ser 0 (cero).

¡Voilà! ¡Ahora tienes un bonito fondo debajo de todo el Scaffold y AppBar! :)

import 'package:flutter/material.dart';
import 'package:mynamespace/ui/shared/colors.dart';
import 'package:mynamespace/ui/shared/textstyle.dart';
import 'package:mynamespace/ui/shared/ui_helpers.dart';
import 'package:mynamespace/ui/widgets/custom_text_form_field_widget.dart';

class SignUpView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack( // <-- STACK AS THE SCAFFOLD PARENT
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"), // <-- BACKGROUND IMAGE
              fit: BoxFit.cover,
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent, // <-- SCAFFOLD WITH TRANSPARENT BG
          appBar: AppBar(
            title: Text('NEW USER'),
            backgroundColor: Colors.transparent, // <-- APPBAR WITH TRANSPARENT BG
            elevation: 0, // <-- ELEVATION ZEROED
          ),
          body: Padding(
            padding: EdgeInsets.all(spaceXS),
            child: Column(
              children: [
                CustomTextFormFieldWidget(labelText: 'Email', hintText: 'Type your Email'),
                UIHelper.verticalSpaceSM,
                SizedBox(
                  width: double.maxFinite,
                  child: RaisedButton(
                    color: regularCyan,
                    child: Text('Finish Registration', style: TextStyle(color: white)),
                    onPressed: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
Tuco
fuente
3

Podemos usar Container y marcar su altura como infinito

body: Container(
      height: double.infinity,
      width: double.infinity,
      child: FittedBox(
        fit: BoxFit.cover,
        child: Image.network(
          'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
        ),
      ),
    ));

Salida:

ingrese la descripción de la imagen aquí

jitsm555
fuente
2
decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("images/background.png"),
        fit: BoxFit.cover
      ),
    ),

esto también funciona dentro de un contenedor.

pasta de vinayak
fuente
-1

Para establecer una imagen de fondo sin encoger después de agregar al niño, use este código.

  body: Container(
    constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage("assets/aaa.jpg"),
        fit: BoxFit.cover,
        )
      ),

    //You can use any widget
    child: Column(
      children: <Widget>[],
    ),
    ),
Dulya Perera
fuente
-1
body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/background.png'),fit:BoxFit.cover
      )
    ),
);
Balachandran Muthuraj
fuente
La respuesta proporcionada se marcó para su revisión como una publicación de baja calidad. Aquí hay algunas pautas para ¿Cómo escribo una buena respuesta? . Esta respuesta proporcionada podría beneficiarse de una explicación. Las respuestas de solo código no se consideran respuestas "buenas".
Trenton McKinney