I want to create a Card that is reusable with Image. Am I on the right track in the new type of Card? I do not know how to put the Image on the card. all the question regarding the reusable widget card type in stackoverflow and youtube seems old and i dont know if it is truly working in the newer version.

To add assets to your application, add an assets section, like this:

assets: - assets/

4. Make this changes in your ListViewCard widget:

import 'package:flutter/material.dart';

class ListViewCard extends StatelessWidget {
  final String title;
  final void Function()? onTap;
  final String imageOfPlant; //Change to String

  const ListViewCard(
      {super.key,
      required this.title,
      required this.onTap,
      required this.imageOfPlant,
      });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: const Color.fromARGB(255, 75, 175, 78),
      elevation: 0,
      margin: const EdgeInsets.all(8),  
      semanticContainer: true,
      clipBehavior: Clip.antiAliasWithSaveLayer,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: InkWell(
        splashColor: Colors.lightGreenAccent.withAlpha(30),
        onTap: onTap,
        //sizedBox of the card
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Image.asset(
              imageOfPlant,
              height: 200,
              width: 150,
              fit: BoxFit.cover,
            ),
            SizedBox(
            width: 150,        
            height: 50,
            child: Center(
              child: Text(title,
              textAlign: TextAlign.center,
                style: const TextStyle(
                fontSize: 19,
                
                fontFamily: 'RobotoMedium',
                color: Color(0xffeeeeee)),// textstyle
              ),
            ),),//text //SizedBox
          ], // <widget>[]
        ), // column
      ), //inkwell       
    ); // card
  }
}

5. Use your card

   ListViewCard( title: 'Lotus', onTap: () {}, imageOfPlant: 'assets/image.jpg')

OUTPUT:

CodePudding user response：

You can use Stack widget for this,

class ListViewCard extends StatelessWidget {
  final String title;
  final void Function()? onTap;
  final Image imageOfPlant;

  const ListViewCard({
    super.key,
    required this.title,
    required this.onTap,
    required this.imageOfPlant,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: const Color.fromARGB(255, 75, 175, 78),
      elevation: 0,
      margin: const EdgeInsets.all(8),
      semanticContainer: true,
      clipBehavior: Clip.antiAliasWithSaveLayer,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: InkWell(
        splashColor: Colors.lightGreenAccent.withAlpha(30),
        onTap: onTap,
        //sizedBox of the card
        child: Stack(
          children: [
            Positioned.fill( // or positioned with top.left,bottom,right
              child: imageOfPlant,
            ),
            Align(
              alignment: Alignment.bottomCenter,//based on your need
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    width: 150,
                    height: 200,
                    child: Text(
                      title,
                      style: const TextStyle(
                          fontSize: 19,
                          fontFamily: 'RobotoMedium',
                          color: Color(0xffeeeeee)), // textstyle
                    ),
                  ), //text //SizedBox
                ], // <widget>[]
              ),
            ),
          ],
        ), // column
      ), //inkwell
    ); // card
  }
}

Also

Instead of using Image as DecorationImage, you can use Stack that @YeasinSheikh said blew.