CODEWITHSUNDEEP
flutterimagecontainersflutter-swiper
baidu taobao
baidu taobao

Reputation: 11

get the image from the api and how to set the dynamic height of each image in flutter?

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.

Upvotes: 0

Views: 1698

Answers (1)

Shruti Ramnandan Sharma
Shruti Ramnandan Sharma

Reputation: 4565

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,
      ),
        ),

Upvotes: 0

Related Questions