How can I make my image stick to the borders as shown in the attachment?

Question

This is my code and I tried to make it stick to the bottom right as in the attachment image but I can't seem to accomplish that. I tried to use the Row Widget to position it at the end but it doesn't seem to do much. Any tips since I'm new to the mobile development world?

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class MenuCard extends StatelessWidget {
  const MenuCard({
    Key? key,
    required this.cardTitle,
    required this.pageDestination,
    required this.imageSource, required this.cardColor,
  }) : super(key: key);

  final String cardTitle;
  final Widget pageDestination;
  final String imageSource;
  final Color cardColor;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Padding(
        padding: const EdgeInsets.only(right: 10),
        child: Container(
          padding:
              const EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 50),
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: cardColor,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                cardTitle,
                style: GoogleFonts.quicksand(
                  textStyle: const TextStyle(
                    fontSize: 25,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Image.asset(
                    imageSource,
                    width: 75,
                    height: 75,
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Set the image as a Container background image, then set the DecorationImage alignment property to bottomRight & fit property to BoxFit.none

Sample:

GestureDetector(
  onTap: () {},
  child: Container(
    padding: const EdgeInsets.fromLTRB(20, 20, 20, 100),
    width: 200,
    decoration: BoxDecoration(
      image: DecorationImage( //this
        image: AssetImage(imageSource),
        fit: BoxFit.none,//this
        alignment: Alignment.bottomRight, //this
      ),
      borderRadius: BorderRadius.circular(15),
      color: cardColor, 
    ),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          cardTitle, 
          style: const TextStyle(
            fontSize: 18,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        const Text(
          "2.9GB",
          style: TextStyle(
            fontSize: 12,
            color: Colors.white54,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
  ),
);

Code snippet here .