my_lovely_profile_card.dart

///
/// This DartPad is profile card design that looks so cool! The
/// code is split into widgets that make interpreting the code
/// easier! You can change parameters to have different outcomes!
///
/// Author: Yazeed AlKhalaf
/// Twitter: @YazeedAlKhalaf | https://twitter.com/YazeedAlKhalaf
///
/// ** Please credit the author if you use this code or some of it! 🙈🚀 **
///

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeView(),
    );
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyLovelyProfileCard(),
      ),
    );
  }
}

// Below are the widgets that make the card!

class MyLovelyProfileCard extends StatelessWidget {
  final double? width;
  final double? height;
  
  const MyLovelyProfileCard({
    this.width,
    this.height,
  });
  
  @override
  Widget build(BuildContext context) {
    final double _defaultWidth = 300;
    final double _defaultHeight = 200;
    
    return SizedBox(
          width: width ?? _defaultWidth,
          height: height ?? _defaultHeight,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Color(0xff70C7AB),
                    Color(0xff1C7489),
                  ],
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  MyLovelyPicture(),
                  MyLovelyName(
                    name: "يارا الأحمد",
                  ),
                  MyLovelyRating(),
                ],
              ),
            ),
          ),
        );
  }
}

class MyLovelyPicture extends StatelessWidget {
  final double? radius;

  const MyLovelyPicture({
    this.radius,
  });

  @override
  Widget build(BuildContext context) {
    final double _defaultRadius = 50;

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Stack(
          alignment: Alignment.center,
          children: <Widget>[
            CircleAvatar(
              radius: radius ?? _defaultRadius,
              backgroundColor: Colors.white,
            ),
            CircleAvatar(
              radius: radius != null ? radius! - 2 : _defaultRadius - 2,
              backgroundImage: NetworkImage(
                "https://iso.500px.com/wp-content/uploads/2015/03/business_cover.jpeg",
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class MyLovelyName extends StatelessWidget {
  final String name;

  const MyLovelyName({
    required this.name,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          name,
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

class MyLovelyRating extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        MyLovelyStar(isFilled: true),
        MyLovelyStar(isFilled: true),
        MyLovelyStar(isFilled: true),
        MyLovelyStar(isFilled: false),
        MyLovelyStar(isFilled: false),
        const SizedBox(width: 10),
        Text(
          "45",
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
            fontWeight: FontWeight.bold,
            decoration: TextDecoration.underline,
          ),
        ),
      ],
    );
  }
}

class MyLovelyStar extends StatelessWidget {
  final bool isFilled;

  const MyLovelyStar({
    required this.isFilled,
  });

  @override
  Widget build(BuildContext context) {
    return Icon(
      isFilled ? Icons.star_rounded : Icons.star_border_rounded,
      color: isFilled ? Color(0xffEDBF4B) : Color(0xffABC9D7),
    );
  }
}