web-dev-qa-db-fra.com

Comment étirer une image pour l'adapter à tout l'arrière-plan (100% hauteur x 100% largeur) dans Flutter?

J'ai une image qui ne correspond pas au rapport hauteur/largeur de l'écran de mon appareil. Je souhaite étirer l'image pour qu'elle remplisse complètement l'écran et je ne souhaite pas rogner aucune partie de l'image.

CSS a le concept de pourcentage, je peux donc définir la hauteur et la largeur à 100%. Mais il ne semble pas que Flutter ait ce concept, et il est mauvais de simplement coder en dur la hauteur et la largeur, alors je suis coincé.

Voici ce que j'ai (j'utilise une pile car j'ai quelque chose au premier plan de l'image):

Widget background = new Container(
  height: // Not sure what to put here!
  width: // Not sure what to put here!
  child: new Image.asset(
    asset.background,
    fit: BoxFit.fill, // I thought this would fill up my Container but it doesn't
  ),
);

return new Stack(
  children: <Widget>[
    background,
    foreground,
  ],
);
imagecontainersflutterstretch
7
Mary

Mauvaise approche ici.

Utilisez DecoratedBox à la place. Ou bien l'attribut decoration/foregroundDecoration of Container (qui utilise ensuite DecoratedBox).

return new Container(
  decoration: const BoxDecoration(
    image: const DecorationImage(
      fit: BoxFit.fill,
      image: const AssetImage("images/common/toto.png"),
    ),
  ),
  child: new Text("Hello"),
);
14
Rémi Rousselet

Dans votre pile, vous devriez envelopper votre widget background dans un Positioned.fill .

return new Stack(
  children: <Widget>[
    new Positioned.fill(
      child: background,
    ),
    foreground,
  ],
);
5
Mary

Ce qui suit adaptera l'image à 100% de la largeur du conteneur alors que la hauteur est constante. Pour les actifs locaux, utilisez AssetImage

Container(
  width: MediaQuery.of(context).size.width,
  height: 100,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("https://picsum.photos/250?image=9"),
    ),
  ),
)

Modes de remplissage d'image:

  • Remplir - L'image est étirée

    fit: BoxFit.fill

     enter image description here

  • Fit Height - image conservée proportionnelle tout en s'assurant que toute la hauteur de l'image est affichée (risque de débordement)

    fit: BoxFit.fitHeight

     enter image description here

  • Fit Width - image conservée proportionnelle tout en s'assurant que toute la largeur de l'image est affichée (risque de débordement)

    fit: BoxFit.fitWidth

     enter image description here

  • Cover - image conservée proportionnelle, assure une couverture maximale du conteneur (risque de débordement)

    fit: BoxFit.cover

     enter image description here

  • Contain - l'image conservée proportionnelle, aussi minime que possible, réduira sa taille si nécessaire pour afficher l'image entière

    fit: BoxFit.contain

     enter image description here

5
Jossef Harush

Je pense que pour votre propos Flex pourrait mieux fonctionner que Container ():

new Flex(
    direction: Axis.vertical,
    children: <Widget>[
      Image.asset(asset.background)
    ],
   )
1
M_Lude

Pour le remplissage, j'utilise parfois SizedBox.expand

0
KnightsForce