1
votes

Flutter - Comment puis-je adapter chaque image dans un ListView horizontal à l'écran?

J'ai créé un ListView horizontal contenant beaucoup d'images, mais chaque image de ListView ne correspond pas à l'écran (parfois je dois faire défiler pour voir le reste et bien sûr une partie de l'image suivante). Comment puis-je étirer chaque image pour l'adapter à l'écran et faire défiler pour voir l'image suivante (l'image suivante doit également s'adapter à l'écran)

EXEMPLE DE MISE À JOUR Horizontal Image ListView

flutter

0 commentaires

4 Réponses :

1
votes

Vous pouvez utiliser DecorationImage avec BoxFit.fill

Exemple:

Container(
          width: 64.0,
          height: 64.0,
          decoration: new BoxDecoration(
            shape: BoxShape.circle,
            image: new DecorationImage(
                fit: BoxFit.fill,
                image: new NetworkImage('my_url.jpg')
            )
        ))

4 commentaires

Non, je veux dire étirer chaque image dans ListView horizontal pour l'écran pas seulement une image

Pouvez-vous avoir une maquette ou une capture d'écran. Je ne sais pas ce que tu veux dire?

Exemple mis à jour

Je pense donc que vous pouvez définir la largeur de l'image égale à la taille de l'écran. Pour obtenir la largeur de l'écran. Vous pouvez utiliser `` MediaQuery.of (context) .size.width, ''

0
votes

Vous pouvez utiliser ce code pour une vue de liste horizontale avec des images parfaitement ajustées.

 Container(
            height: 275,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: furnitures.length,
              itemBuilder: (BuildContext context, int index) {
                Map furniture = furnitures[index];

                return Padding(
                  padding: EdgeInsets.only(right: 20),
                  child: GestureDetector(
                    onTap: (){
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context){
                            return Details();
                          },
                        ),
                      );
                    },
                    child: Container(
                      height: 275,
                      width: 280,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            furniture['name'],
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 20,
                            ),
                          ),
                          SizedBox(height: 10),
                          ClipRRect(
                            borderRadius: BorderRadius.circular(15),
                            child: Image.asset(
                              "${furniture["img"]}",
                              height: 240,
                              width: 280,
                              fit: BoxFit.cover,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },

            ),
          )

0 commentaires

0
votes

Vous pouvez utiliser MediaQuery pour y parvenir. Simplement en tapant MediaQuery.of (context) .size.width qui vous donne la largeur de l'écran de l'appareil puis vous attribuez à la largeur de l'image

0 commentaires

0
votes

Ce que je voulais dire, c'était un widget de carrousel, je n'en ai jamais entendu parler auparavant. J'étais nouveau dans le développement mobile.

0 commentaires