How to design card widget in flutter

Question

I'm trying to design a student dashboard , and am wondering how to add the blue color at the end of this card widget where the text( student, news ) are inserted ?

Answer 1

You can make a clickable card using GestureDetector. Here I have hovered a bar on the image using Stack and created a simple custom card and you can add your desired changes to it and use it in your codes.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class CardItem extends StatefulWidget {
CardItem({ super.key });

  @override
  State<CardItem> createState() => _CardItemState();
}

class _CardItemState extends State<CardItem> {
@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      print('object');
    },
    child: Container(
      margin: const EdgeInsets.only(bottom: 10.0),
      child: Center(
        child: Stack(
          children: [
            Image.asset(
              'assets/images/orange.jpg',  //Write the address of your photo located in the project folder
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 2,
            ),
            Positioned(
              bottom: 72,
              child: Column(
                children: [
                  Container(
                    padding:
                      const EdgeInsets.only(
                        top: 28,
                        left: 15,
                        right: 15
                       ),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: const Color.fromRGBO(249, 249, 249, 0.7),
                    ),
                    width: MediaQuery.of(context).size.width / 1.1,
                    height: MediaQuery.of(context).size.height / 9,
                    margin: const EdgeInsets.only(left: 18),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                        mainAxisAlignment:MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                          children: const [
                            Text(
                              'Orange Juice',
                              style: TextStyle(
                                fontSize: 17,
                                color: Color.fromARGB(255, 58, 54, 54),
                              ),
                            ),
                            Text(
                              '35 Cal',
                              style: TextStyle(
                                fontSize: 13.5,
                                fontFamily: 'YekanRegular',
                                color: Color.fromARGB(255, 58, 54, 54),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}}

Answer 2

Widget getCardItem() {
        return Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 100,
              width: 105,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3),
                  ),
                ],
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Container(
                        child: Icon(Icons.supervisor_account,
                            size: 24, color: Colors.blueAccent),
                        padding: const EdgeInsets.all(12),
                      ),
                      Container(
                        child: Text(
                          "2100",
                          style: TextStyle(
                            color: Colors.blueAccent,
                          ),
                        ),
                        padding: const EdgeInsets.all(12),
                      ),
                    ],
                  ),
                  Container(
                    decoration: const BoxDecoration(
                        color: Colors.blueAccent,
                        borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(12),
                            bottomLeft: Radius.circular(12))),
                    child: Text("Student"),
                    padding: const EdgeInsets.all(12),
                  )
                ],
              ),
            ),
          ),
        );
      }

Answer 3

You can do

Card(
  child: Column(
    children: [
      Expanded(
        flex: 3,
        child: Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children:[
              //custom widgets
              Icon(...),
              Text(...) 
            ]
          )
        )
      ),
      Expanded(
        child: Container(
           decoration: BoxDecoration(color: Colors.blue[900]),
           child: Center(
              child: Text(...)//custom text and style
           )
        )
      )
    ]
  )
);

Answer 4

Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3),
              ),
            ],
          ),
          child: Column(
            children: [
              Container(
                child: Icon(Icons.person, size: 24, color:Colors.blueAccent),
                padding: const EdgeInsets.all(12),
              ),
              Container(
                decoration: const BoxDecoration(
                  color: Colors.blueAccent,
                  borderRadius: BorderRadius.only(bottomRight: Radius.circular(12), bottomLeft: Radius.circular(12))
                ),
                child: Text("Student"),
                padding: const EdgeInsets.all(12),
              )
            ],
          ),
        )

output: