Can you fix the this card I made in flutter?

Issue

I have a design of a card that I want to implement in my flutter project. I want the name of the card to be clickable, then the trash icon and pencil can also be clicked.

Here is my code

import 'package:flutter/material.dart';
import 'package:project_ukk/constants/color_constant.dart';

class CardCollection extends StatelessWidget {
  const CardCollection({Key? key}) : super(key: key);

  final double _borderRadius = 24.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: Stack(
            children: <Widget>[
              Container(
                height: 150,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(_borderRadius),
                  gradient: LinearGradient(
                    colors: const [kLightRedColor, kLightOrange],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  boxShadow: const [
                    BoxShadow(
                      color: kDarkGreyColor,
                      blurRadius: 12,
                      offset: Offset(0, 6),
                    ),
                  ],
                ),
              ),
              Positioned.fill(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 2,
                      child: Image.asset(
                        'assets/images/bag_1.png',
                        height: 64,
                        width: 64,
                      ),
                    ),
                    Expanded(
                      flex: 4,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Text(
                            'Name of The Collection',
                            style: TextStyle(color: kWhiteColor, fontSize: 20),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This is my color_constants.dart

import 'package:flutter/material.dart';

const kPrimaryColor = Color(0xFF1B383A);
const kSecondaryColor = Color(0xFF59706F);
const kDarkGreyColor = Color(0xFFA8A8A8);
const kWhiteColor = Color(0xFFFFFFFF);
const kZambeziColor = Color(0xFF5B5B5B);
const kBlackColor = Color(0xFF272726);
const kTextFieldColor = Color(0xFF979797);
const kVeryDarkCyan = Color.fromRGBO(7, 34, 39, 1);
const kDarkModerateCyan = Color.fromRGBO(53, 133, 139, 1);
const kModerateCyan = Color.fromRGBO(79, 189, 186, 1);
const kPowderBlue = Color.fromRGBO(176, 224, 230, 1);
const kDarkBlue = Color.fromRGBO(34, 87, 122, 1);
const kPurple = Color.fromARGB(255, 62, 38, 102);
const kModerateCyanLimeGreen = Color.fromRGBO(87, 204, 153, 1);
const kSoftLimeGreen = Color.fromRGBO(128, 237, 153, 1);
const kRedColor = Color.fromRGBO(218, 18, 18, 1);
const kLightRedColor = Color.fromRGBO(255, 99, 99, 1);
const kLightOrange = Color.fromRGBO(255, 173, 96, 1);
const kGreenColor = Color.fromARGB(255, 32, 170, 110);

here is my skecth(sorry if its bad)

Let me know if you need more source code, thank you for reading my question(or my request).

Solution

Try below code hope its help to you. if you want design as above image.

  Container(
        height: 130,
        width: 300,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          border: Border.all(),
        ),
        child: Column(
          children: [
            Row(
              children: [
                Container(
                  margin: EdgeInsets.all(8),
                  width: 60.0,
                  height: 60.0,
                  decoration: BoxDecoration(
                    color: Colors.grey[50],
                    border: Border.all(color: Colors.black),
                    shape: BoxShape.rectangle,
                  ),
                  child: Image.asset(
                    'assets/1.png',
                    width: 50,
                    height: 50,
                    fit: BoxFit.fill,
                  ),
                ),
                Container(
                  alignment: Alignment.topCenter,
                  margin: EdgeInsets.all(8),
                  child: Text(
                    'Put Your Title Here',
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                IconButton(
                  onPressed: () {
                    print('Delete Button Pressed');
                    //write onpressed function here
                  },
                  icon: Icon(Icons.delete),
                ),
                IconButton(
                  onPressed: () {
                    print('Edit Button Pressed');
                    //write onpressed function here
                  },
                  icon: Icon(Icons.edit),
                ),
              ],
            )
          ],
        ),
      ),

Result->

Answered By - Ravindra S. Patil