Flutter Question posted in
The official Flutter documentation can be found here.

How do I design a card like this with Flutter

I need a design like this

enter image description here

for my own application, thank you for your help.
I’m designing a language learning app.
I would like to thank those who will help me with such a design.
It is very important for me to keep the design as it is. If you want detailed information, you can contact me.

Tags:

2

Answers


  1. 0

    small changes in this custom design to get exact card design like your image.
    pass these fields and get the result .

    containerDesign({Color bgColor=Colors.transparent,String image=”,String text=”}){
    return Container(decoration:BoxDecoration(borderRadius:BorderRadius.circular(20),
    color:bgColor,image:DecorationImage(image: AssetImage(image))),
    child:Column(children: [
    Text(text)
    ]),
    );
    }

    Login or Signup to reply.
  2. 0

    Its hard to code it exactly like that, but here is a quick solution:

    class CustomCard extends StatelessWidget {
  final Color backgroundColor;
  final Color gradientColor;

  const CustomCard({
    super.key,
    required this.backgroundColor,
    required this.gradientColor,
  });

  @override
  Widget build(BuildContext context) {
    double width = 200;
    return Container(
      width: width,
      height: width / 3 * 4,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(25),
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.centerRight,
          stops: const [0, 0.8],
          colors: [
            backgroundColor,
            gradientColor,
          ],
        ),
      ),
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          const Padding(
            padding: EdgeInsets.all(10),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  "Your Text Here",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 26,
                    color: white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 10),
              ],
            ),
          ),
          Positioned(
            bottom: -width / 2,
            child: CircleAvatar(
              radius: (width / 2) - 20,
              backgroundColor: backgroundColor.withOpacity(0.25),
            ),
          ),
        ],
      ),
    );
  }
}

    You can edit the parameters to fit your style.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search