0

I get the image from the backend via the API, but flutter must set constraints in container, but the image height are not the same, what should I do?

Flutter image problems:

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_use_redux/component/pureProduct.dart';
import 'package:flutter_use_redux/models/product.dart';
import 'package:flutter_use_redux/reselect/reselectHome.dart';
import 'package:oktoast/oktoast.dart';

/// 首页轮播组件编写
class SwiperDiy extends StatelessWidget {
  final List swiperDataList;
  final String imageHost;
  final bool autoPlay;

  SwiperDiy({Key key, this.swiperDataList,this.imageHost,this.autoPlay}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   Map swiperData= reselectSwiper(swiperDataList);
   List realSwiperData=swiperData['list'];
  
    return Container(
         constraints:
          BoxConstraints(
           maxHeight:550
         ),
        
        child:  Swiper(
      scrollDirection: Axis.horizontal,
      itemBuilder: (BuildContext context, int index) {
        Map product=realSwiperData[index];
        return InkWell(
    onTap: () {
      print('/collections/${product['link']}');
    },
    child: CachedNetworkImage(imageUrl:imageHost+product['href'],fit: BoxFit.fill,),);
      },
      itemCount: realSwiperData?.length,
      //pagination: new SwiperPagination(),
      autoplay: realSwiperData.length>1,
      viewportFraction:1,
      // 当前视窗展示比例 小于1可见上一个和下一个视窗
      scale: 1,
    ),
      );
  }
}

This is my code. But the maxHeight is not suited for my thought:

enter image description here

For example, the image is from the network, sometimes its height maybe 300, sometimes its height maybe 400, I just want the swiper to stretch the Container.

dippas
  • 58,591
  • 15
  • 114
  • 126
baidu taobao
  • 11
  • 2
  • Why are you using `BoxFit.fill`? – Christopher Moore Aug 13 '20 at 21:38
  • 1
    BoxFit.cover does not work ? so what should i do @Christopher Moore – baidu taobao Aug 14 '20 at 02:47
  • Swiper is a collection of images right? So what do you expect to happen when you have different sized images in the collection? Either the larger images need to scale down to match the smallest image in swiper or the smaller images need to scale up to match the largest image. – Kent Aug 14 '20 at 23:21
  • some image is big ,some image is small,https://harbor.alpha.stylewe.com/ ,change the mobile mode, you can see the swiper carousel , – baidu taobao Aug 17 '20 at 16:49

1 Answers1

0

Use height and width constructor of Container

 Container(
         height: 200,
         width: 200,
          //  constraints:
          //   BoxConstraints(
          //    maxHeight:550
          //  ),
          
       child:  Swiper(
        scrollDirection: Axis.horizontal,
        itemBuilder: (BuildContext context, int index) {
          Map product=realSwiperData[index];
          return InkWell(
      onTap: () {
         print('/collections/${product['link']}');
      },
      child:  CachedNetworkImage(
            imageUrl:imageHost+product['href'],
           fit: BoxFit.fill,
           placeholder: (context, url) => Center(child: CircularProgressIndicator()),
            errorWidget: (context, url, error) => Center(child: Icon(Icons.error)),
          )
     
      );
        },
        itemCount:  realSwiperData?.length,
        //pagination: new SwiperPagination(),
        autoplay: realSwiperData.length>1,,
        viewportFraction:1,
        // 当前视窗展示比例 小于1可见上一个和下一个视窗
        scale: 1,
      ),
        ),
Shruti Ramnandan Sharma
  • 4,027
  • 13
  • 44
  • 76