How add one CircularProgressIndicator to my image in one card

Question

Card buildCard() {
  var heading = 'Existence';
  var subheading = '11/11/2022';
  var cardImage = CachedNetworkImage(
    imageUrl: "https://source.unsplash.com/random/800x600?existence",
    imageBuilder: (context, imageProvider) => Container(
      width: 400,
      height: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.fitWidth,
          ),
        ),
    ),
  placeholder: (context, url) => Container(
  alignment: Alignment.center,
  child: CircularProgressIndicator()
  ));
  var supportingText =
      'Chapitre 18';
  return Card(
      elevation: 5.0,
      child: Column(
        children: [
          ListTile(
            title: Text(heading),
            subtitle: Text(subheading),
            trailing: Icon(Icons.favorite_outline),
          ),
          Container(
            height: 350.0,
            child: Ink.image(
              image: cardImage,
              fit: BoxFit.cover,
            ),
          ),
          Container(
            padding: EdgeInsets.all(16.0),
            alignment: Alignment.centerLeft,
            child: Text(supportingText),
          ),
        ],
      ));
}

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black45,
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.all(25.0),
        child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              children: [
                buildCard(),
              ],
            )),
      ));
}

I'm pretty new to flutter/dart, i'm trying to build one home with multiple cards then i'm trying to add one CircularProgressIndicator for the loading of my image but i'haven't find a solution...

And i start to wondering if is possible...

Right now my error

The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider<Object>'.

Answer 1

You have to put Ink.image inside of the CachedNetworkImage#imageBuilder and use just cardImage in your Card container

Card buildCard() {
  var heading = 'Existence';
  var subheading = '11/11/2022';
  var cardImage = CachedNetworkImage(
      imageUrl: "https://source.unsplash.com/random/800x600?existence",
      imageBuilder: (context, imageProvider) => Container(
        width: 400,
        height: 200,
        child: Ink.image(
          image: imageProvider,
          fit: BoxFit.cover,
        ),
      ),
      placeholder: (context, url) => Container(
          alignment: Alignment.center,
          child: CircularProgressIndicator()
      ));
  var supportingText =
      'Chapitre 18';
  return Card(
      elevation: 5.0,
      child: Column(
        children: [
          ListTile(
            title: Text(heading),
            subtitle: Text(subheading),
            trailing: Icon(Icons.favorite_outline),
          ),
          Container(
            height: 350.0,
            child: cardImage,
          ),
          Container(
            padding: EdgeInsets.all(16.0),
            alignment: Alignment.centerLeft,
            child: Text(supportingText),
          ),
        ],
      ));
}