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).

CodePudding user response：

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->

CodePudding user response：

If you want any widget to be clickable, you can wrap it in a Inkwell widget and set the onTap property.

CodePudding user response：

It should be something like this:

                Row(
                  children: [
                    // replace placeholder with your image widget
                    Placeholder(
                      fallbackHeight: 40,
                      fallbackWidth: 80,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        GestureDetector(
                          onTap: () {}, // provide your click function
                          child: Text('Title'),
                        ),
                        Row(
                          children: [
                            IconButton(
                              onPressed: () {}, // provide your click function
                              icon: Icon(Icons.delete_forever),
                            ),
                            IconButton(
                              onPressed: () {}, // provide your click function
                              icon: Icon(Icons.edit),
                            ),
                          ],
                        )
                      ],
                    ),
                  ],
                ),