Images de différentes tailles dans la vue horizontale de la liste/grille avec une hauteur fixe et une largeur dynamique dans Flutter.

Question

Je veux créer une ligne horizontale ListView ou GridView avec une hauteur fixe des images mais la largeur de l'image doit être dynamique .

Voici le code que j'essaie de faire mais je n'arrive pas à obtenir le résultat attendu. J'ai également ajouté une capture d'écran du design qui illustre le résultat attendu.

Avec la vue en liste

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ViewPager extends StatefulWidget {
  createState() => _ViewPager();
}

class _ViewPager extends State<ViewPager> {

  static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
  static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          _imagesList(images: [exercise_image1, exercise_image2]),
        ],
      ),
    );
  }

  Widget _imagesList({List<String> images}) {

    return Container(
      width: double.maxFinite,
      height: 150,
      color: Colors.red,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          _imageListItem(imagePath: images.first),
          _imageListItem(imagePath: images.last),
        ],
      ),
    );

  }

  Widget _imageListItem({@required String imagePath}) {

    return CachedNetworkImage(
      width: 200, // I want this to be according to the image width
      imageUrl: imagePath,
      placeholder: (context, url) => Container(
        child: CircularProgressIndicator(),
      ),
      imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: imageProvider,
              fit: BoxFit.fitHeight
          ),
        ),
      ),
    );

  }

}

Avec la vue en grille

Même problème avec la vue en grille, nous définissons la hauteur de la vue en grille mais nous ne pouvons pas donner une largeur dynamique à l'image.

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ViewPager extends StatefulWidget {
  createState() => _ViewPager();
}

class _ViewPager extends State<ViewPager> {

  static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
  static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          height: 200,
          child: _imagesList(images: [exercise_image1, exercise_image2]),
        ),
      ),
    );

  }

  Widget _imagesList({List<String> images}) {

    return GridView.count(
      crossAxisCount: 1,
      scrollDirection: Axis.horizontal,
      children: [
        _imageListItem(imagePath: images[0]),
        _imageListItem(imagePath: images[1]),
      ],
    );

  }

  Widget _imageListItem({@required String imagePath}) {

    return CachedNetworkImage(
      imageUrl: imagePath,
      placeholder: (context, url) => Container(
        child: CircularProgressIndicator(),
      ),
      imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: imageProvider,
              fit: BoxFit.fitHeight
          ),
        ),
      ),
    );

  }

}

Answer 1

Une façon d'y parvenir est la suivante.

class _MyWidgetState extends State<MyWidget> {
  static final exercise_image1 = "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l";
  static final exercise_image2 = "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          height: 200,
          child: _imagesList(images: [exercise_image1, exercise_image2]),
        ),
      ),
    );
  }

  Widget _imagesList({List<String> images}) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        _imageListItem(imagePath: images[0]),
        _imageListItem(imagePath: images[1]),
      ],
    );
  }

  Widget _imageListItem({@required String imagePath}) {
    return CachedNetworkImage(
      imageUrl: imagePath,
      placeholder: (context, url) => Container(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

Answer 2

Essayez d'utiliser listview comme ceci. Il donne la sortie que vous vouliez.

     @override
  Widget build(BuildContext context) {
    Widget _imageListItem({@required String imagePath}) {
      return   CachedNetworkImage(
        imageUrl: imagePath,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
      );
    }
    Widget horizontalList1 = new Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 200.0,
      child:
      ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          _imageListItem(imagePath: exercise_image1),
          SizedBox(width: 2,),
          _imageListItem(imagePath: exercise_image2),

        ],
      ),
    );
    return new Scaffold(
      body: new Center(
        child: new Container(
          child: ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              horizontalList1,
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }}

Answer 3

La chose dont vous parlez est Rapport d'aspect vous voulez qu'il s'adapte à la largeur.

Dans le widget image, définissez adapter a BoxFit.fitWidth et le problème sera résolu.

En savoir plus aquí .

Answer 4

Essayez ce code :

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class ViewPager extends StatelessWidget {
  const ViewPager({Key key}) : super(key: key);

  static final exerciseImages = [
    "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l",
    "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l",
    "https://drive.google.com/uc?export=download&id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l",
    "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri",
    "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri",
    "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri",
    "https://drive.google.com/uc?export=download&id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri",
    // add more image url here. anything you want.
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 150,
          padding: EdgeInsets.all(12),
          // shuffled to make it a lot more dynamic. demonstration only
          child: _imagesList(images: exerciseImages..shuffle()),
        ),
      ),
    );
  }

  Widget _imagesList({List<String> images}) {
    return ListView.builder(
      physics: BouncingScrollPhysics(), // just for coolness.
      itemCount: images.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        return _imageListItem(imagePath: images[index]); // access each images by their index.
      },
    );
  }

  Widget _imageListItem({@required String imagePath}) {
    return Padding(
      padding: const EdgeInsets.all(4), // add padding so the edges of the image is clearly distinguishable.
      child: CachedNetworkImage(
        imageUrl: imagePath,
        placeholder: (context, url) {
          return Center(
            child: Container(
              height: 32, // properly size the loading indicators.
              width: 32, // properly size the loading indicators.
              child: CircularProgressIndicator(),
            ),
          );
        },
      ),
    );
  }
}

J'ai aussi légèrement amélioré la structure du code. Je l'ai rendu plus dynamique. Le correctif est que vous ne mettez pas du tout la taille dans la balise CachedNetworkImage widget. Il suffit de lui donner une url et un emplacement. Votre code pour le conteneur parent avec height: 150 est bien. L'image du réseau cache s'adaptera automatiquement à cette hauteur.