ranking_widgets.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: RankingApp()
      ),
    );
  }
}

class RankingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Expanded(
            child: RankingWidget(
              image: '',
              name: 'Rihana',
              score: 12200,
              level: 2
            ),
          ),
          Expanded(
            child: RankingWidget(
              image: '',
              name: 'Elsa',
              score: 12320,
              level: 1
            ),
          ),
          Expanded(
            child: RankingWidget(
              image: '',
              name: 'Mesfin',
              score: 12100,
              level: 3
            )
          )
        ]
      )
    );
  }
}


class RankingWidget extends StatelessWidget {
  
  final String image;
  final String name;
  final double score;
  final int level;
  
  const RankingWidget({ super.key, 
                       required this.image, 
                       required this.name, 
                       required this.score,
                        required this.level
                      });
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Column(
          children: [
            ClipOval(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.grey
              )
            ),
            const SizedBox(height: 10),
            Text(name, style: const TextStyle(color: Color(0xFF1A415A), fontWeight: FontWeight.bold)),
            const SizedBox(height: 10),
            Text('$score', style: const TextStyle(color: Color(0xFF1A415A))),
            const SizedBox(height: 10),
          ]
        ),
        CustomPaint(
          child: const SizedBox(height: 50),
          painter: RankingTop(rank: level)
        ),
        Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color(0xFFD97931),
                Color(0xFFEF9345)
             ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter
            )
          ),
          height: 300 / level,
          alignment: Alignment.center,
          padding: const EdgeInsets.all(30),
          child: Text('$level', 
                      textAlign: TextAlign.center, 
                      style: TextStyle(color: 
                                             Colors.white, 
                                             fontSize: (100 / level).toDouble()))
        )
      ]
    );
  }
}

class RankingTop extends CustomPainter {
  
  final int rank;
  const RankingTop({ required this.rank });
  
  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();
    var paint = Paint()
    ..color = Colors.grey.withOpacity(0.5)
    ..style = PaintingStyle.fill;
    
    
    
    var points = [
      rank == 1 || rank == 2 ? Offset(0, size.height) : Offset(0, 0),
      Offset(50, 0),
      rank == 1 || rank == 3 ? Offset(size.width - 50, 0) : Offset(size.width, 0),
      Offset(size.width, size.height),
      Offset(0, size.height),
    ];
    path.addPolygon(points, true);
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(covariant RankingTop oldDelegate) => false;
}