Kit SDK Flutter Image de fond

Question

J'essaie de définir une image d'arrière-plan pour la page d'accueil. Je reçois la place de l'image depuis le début de l'écran et je remplis la largeur mais pas la hauteur Est-ce qu'il me manque quelque chose dans mon code? Existe-t-il des standards d’image pour le flutter? Les images sont-elles redimensionnées 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

Je ne suis pas sûr de comprendre votre question, mais si vous souhaitez que l'image remplisse tout l'écran, vous pouvez utiliser une variable DecorationImage avec un ajustement de BoxFit.cover .

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

Pour votre deuxième question, voici un lien vers la documentation sur la manière d'intégrer des images d'actif dépendantes de la résolution dans votre application.

Answer 2

Si vous utilisez une Container comme corps de la Scaffold, sa taille sera donc la même que celle de son enfant. Ce n'est généralement pas ce que vous souhaitez lorsque vous essayez d'ajouter une image d'arrière-plan à votre application.

En regardant cet autre question, @ collin-jackson a également suggéré d'utiliser Stack au lieu de Container en tant que corps du Scaffold et il fait vraiment ce que vous voulez réaliser.

Voici à quoi ressemble mon code

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

Answer 3

Vous pouvez utiliser Stack pour agrandir l’image.

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

Remarque: Si vous utilisez Scaffold, vous pouvez éventuellement placer Stack dans Scaffold avec ou sans AppBar en fonction de vos besoins. 

Answer 4

Vous pouvez utiliser 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)),
  );
}

Sortie: