loyalty points

main.dart

import 'package:flutter/material.dart';
import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: LoyaltyPointBalance(),
        ),
      ),
    );
  }
}

class LoyaltyPointBalance extends StatelessWidget {
  final double points;
  const LoyaltyPointBalance({
    Key? key,
    this.points = 10,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(top: 6.0),
          child: SizedBox(
            width: 600,
            child: LinearProgressIndicator(
              backgroundColor: Colors.grey,
              color: Colors.red,
              value: (points / 100) * (points / 150),
            ),
          ),
        ),
        Stack(
          children: [
            RewardLineCheckpoint(
              value: 10,
              maximumPoints: 150,
              earnedPoints: points,
            ),
            RewardLineCheckpoint(
              value: 20,
              maximumPoints: 150,
              earnedPoints: points,
            ),
            RewardLineCheckpoint(
              value: 50,
              maximumPoints: 150,
              earnedPoints: points,
            ),
            RewardLineCheckpoint(
              value: 100,
              maximumPoints: 150,
              earnedPoints: points,
            ),
            RewardLineCheckpoint(
              value: 150,
              maximumPoints: 150,
              earnedPoints: points,
            ),
          ],
        ),
      ],
    );
  }
}

class RewardLineCheckpoint extends StatelessWidget {
  final int value;
  final int maximumPoints;
  final double earnedPoints;
  const RewardLineCheckpoint({
    Key? key,
    required this.value,
    required this.maximumPoints,
    required this.earnedPoints,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Color? color = value <= earnedPoints ? Colors.red : Colors.grey;
    return Padding(
      padding: EdgeInsets.only(
        left: (value / earnedPoints) * (maximumPoints / 100),
      ),
      child: Column(
        children: [
          Container(
            height: 16,
            width: 16,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(
                Radius.circular(8),
              ),
              border: Border.all(
                color: color,
              ),
            ),
          ),
          Text(
            '$value',
            style: TextStyle(
              color: color,
            ),
          ),
        ],
      ),
    );
  }
}