awesome_cards.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome cards',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Color(0xFFE0E5EE),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AwesomeCard(
                title: 'EARNINGS (MONTHLY)',
                content: '\$40,000',
                color: Color(0xFF4e73df),
                icon: Icon(
                  Icons.calendar_today,
                  color: Color(0xFFDDDFEB),
                  size: 30,
                ),
              ),
              SizedBox(height: 16.0),
              AwesomeCard(
                title: 'EARNINGS (ANNUAL)',
                content: '\$215,000',
                color: Colors.green,
                icon: Icon(
                  Icons.attach_money,
                  color: Color(0xFFDDDFEB),
                  size: 40,
                ),
              ),
              SizedBox(height: 16.0),
              AwesomeCard(
                title: 'TASKS',
                content: '50%',
                color: Color(0xFF36b9cc),
                icon: Icon(
                  Icons.list,
                  color: Color(0xFFDDDFEB),
                  size: 40,
                ),
              ),
              SizedBox(height: 16.0),
              AwesomeCard(
                title: 'PENDING REQUESTS',
                content: '18',
                color: Color(0xFFf6c23e),
                icon: Icon(
                  Icons.comment,
                  color: Color(0xFFDDDFEB),
                  size: 40,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class AwesomeCard extends StatelessWidget {
  final String title;
  final String content;
  final Widget icon;
  final Color color;

  const AwesomeCard({Key key, this.title, this.content, this.icon, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      child: Container(
        padding: EdgeInsets.only(left: 5.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          color: color,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.15),
              spreadRadius: 8,
              blurRadius: 7,
              offset: Offset(0, 3), // changes position of shadow
            ),
          ],
        ),
        height: 100,
        child: Container(
          padding: EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8.0),
            color: Colors.white,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(
                      color: color,
                      fontWeight: FontWeight.bold,
                      fontSize: 12,
                    ),
                  ),
                  SizedBox(height: 8.0),
                  Text(
                    content,
                    style: TextStyle(
                      color: Color(0xFF5A5C69),
                      fontWeight: FontWeight.w700,
                      fontSize: 20,
                    ),
                  )
                ],
              ),
              icon,
            ],
          ),
        ),
      ),
    );
  }
}