8 Vert

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:intl/intl.dart';

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    buildLegendItem(Colors.green, 'Tokopedia', 24070),
    const Gap(16),
    buildLegendItem(Colors.orange, 'Shoppee', 12540),
    const Gap(16),
    buildLegendItem(Colors.purple, 'Tiktok Shop', 500),
  ],
),

Widget buildLegendItem(Color color, String title, num data) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 4,
            height: 15,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              color: color,
            ),
          ),
          const Gap(8),
          Text(
            title,
            style: const TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: 14,
              color: Colors.black45,
            ),
          ),
        ],
      ),
      Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            NumberFormat.currency(
              symbol: '',
              decimalDigits: 0,
            ).format(data),
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 30,
              color: Colors.black87,
            ),
          ),
          const Gap(8),
          const Text(
            'sales',
            style: TextStyle(
              fontSize: 14,
              color: Colors.black45,
            ),
          ),
        ],
      ),
    ],
  );
}