Comment définir l'image d'arrière-plan dans Flutter ?

Question

J'essaie de définir une image d'arrière-plan pour la page d'accueil. L'image est placée au début de l'écran et remplit la largeur mais pas la hauteur. Est-ce qu'il me manque quelque chose dans mon code ? Existe-t-il des normes d'image pour Flutter ? Les images sont-elles mises à l'échelle en fonction de la résolution de l'écran de chaque téléphone ?

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") 
          ]
        )
      )
    );
  }
}

Answer 1

Nous pouvons utiliser le conteneur et marquer sa hauteur comme étant l'infini.

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',
        ),
      ),
    ));

Sortie :

Answer 2

body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/background.png'),fit:BoxFit.cover
      )
    ),
);

Answer 3

Les autres réponses sont excellentes. Voici une autre façon de procéder.

1. Ici, j'utilise SizedBox.expand() pour remplir l'espace disponible et pour transmettre des contraintes strictes à ses enfants (Container).

2. BoxFit.cover enum pour Zoomer l'image et couvrir tout l'écran

   Widget build(BuildContext context) { return Scaffold( body: SizedBox.expand( // -> 01 child: Container( decoration: BoxDecoration( image: DecorationImage( image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'), fit: BoxFit.cover, // -> 02 ), ), ), ), ); }

Answer 4

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

cela fonctionne également à l'intérieur d'un conteneur.

Answer 5

Pour définir une image de fond sans rétrécissement après l'ajout de l'enfant, utilisez ce code.

  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>[],
    ),
    ),