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,
],
);
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"),
);
Dans votre pile, vous devriez envelopper votre widget background
dans un Positioned.fill .
return new Stack(
children: <Widget>[
new Positioned.fill(
child: background,
),
foreground,
],
);
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"),
),
),
)
Remplir - L'image est étirée
fit: BoxFit.fill
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
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
Cover - image conservée proportionnelle, assure une couverture maximale du conteneur (risque de débordement)
fit: BoxFit.cover
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
Je pense que pour votre propos Flex pourrait mieux fonctionner que Container ():
new Flex(
direction: Axis.vertical,
children: <Widget>[
Image.asset(asset.background)
],
)
Pour le remplissage, j'utilise parfois SizedBox.expand