Flutter NetworkImage Динамическая высота - PullRequest
0 голосов
/ 20 апреля 2019

Я использую NetworkImage для загрузки URL-адреса изображения в виде списка в качестве фонового изображения, как показано ниже,

child:new Card(child:new Container(

          decoration: new BoxDecoration(
              image: new DecorationImage(
                  image: NetworkImage(data[index]["image"]),)

          ),),),

Приведенный выше код показывает представление списка с пустыми карточками без высоты.но он работает нормально, когда я устанавливаю статическую высоту для контейнера. как ниже

new Container(

          height: 380,

          decoration: new BoxDecoration(
              image: new DecorationImage(
                  image: NetworkImage(data[index]["image"]),)

          ),

Проблема в том, что мне нужна динамическая высота загрузки изображения из URL.не могу использовать виджет Image.network, так как мне нужно изображение в качестве фона.

Полный код:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:connectivity/connectivity.dart';
import 'common_widgets.dart';
import 'MyColors.dart';


class ImageList extends StatefulWidget{

  @override
  _ImageListState createState() => new _ImageListState();

}

class _ImageListState extends State<ImageList>{

  String imageApiUrl = "my_url_to_get_posts";
  List data;
  bool is_connected;

  Future<bool> checkConnection() async{

    var conectionResult = await (Connectivity().checkConnectivity());

      if(conectionResult == ConnectivityResult.mobile){
        return true;
      }else if(conectionResult == ConnectivityResult.wifi){

        return true;
      }


      return false;

  }



  Future<String> getData() async{

    http.Response response = await http.get(
      Uri.encodeFull(imageApiUrl),
      headers: {

        "Accept": "application/json"

      }
    );

    setState(() {

      var rest = json.decode(response.body);

      data = rest["data"] as List;

    });



  }


  Future shareImage(String url) async{


  }
  
  Widget itemImage(BuildContext context, int index){
    
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 3),
      child: new Card(

        elevation: 1,

        child: new Container(

          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: new Container(

//              width: double.infinity,
              height: 380,

              decoration: new BoxDecoration(
                  image: new DecorationImage(
                      image: NetworkImage(data[index]["image"]),)

              ),
              
              child: new Align(

                alignment: Alignment.bottomRight,

                child: new GestureDetector(
                  child: new Container(
                    height: 45,
                    width: 45,
                    child: Icon(Icons.share, color: Colors.white, ),
                    decoration: new BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(MyColors().getColorFromHex("#40000000"))

                    ),


                  ),
                  onTap: (){

                    print("click");

                    shareImage("");

                  },

                ),
              )

            ),
          ),


        ),


      ),
    );
    
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(

      appBar: AppBar(
        backgroundColor: Colors.black,
        title: new Text("Quotes of the Day"),
        
      ),
      
      body: RefreshIndicator(

        onRefresh: getData,

        child: new ListView.builder(
          itemCount: data == null ? 0 : data.length,
          itemBuilder: itemImage,
        ),
      ),
      
    );


  }

  /**
   * On Page Layout load complete
   */
  @override
  void initState() {

    super.initState();

    this.checkConnection().then((internet){

      print("My"+ internet.toString());

      if(internet != null && internet){

        this.getData();

      }else{

        CommonWidget().showAlertDialog(context, "No Internet", "Please Connect to Internet");

      }

    });


  }


}

1 Ответ

1 голос
/ 20 апреля 2019

Вы допустили ошибку: Вы хотите показать полное изображение, но вы устанавливаете его в качестве фона

Очевидно, что контейнер установит свою высоту так, чтобы он содержал дочерний элемент , а не содержал background

Если вы хотите показать полное изображение, тогда вы должны установить его как дочерний элемент контейнера , тогда он масштабирует height, чтобы включить image

...