9 Horiz

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

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    buildLegendItem(
      color: Colors.green,
      title: 'Tokopedia',
      amount: 524000,
      sale: 1530,
    ),
    const Gap(30),
    buildLegendItem(
      color: Colors.orange,
      title: 'Shoppee',
      amount: 290000,
      sale: 900,
    ),
  ],
),

Widget buildLegendItem({
  required Color color,
  required String title,
  required num amount,
  required num sale,
}) {
  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,
            ),
          ),
        ],
      ),
      Text(
        NumberFormat.currency(
          symbol: '\$',
          decimalDigits: 0,
        ).format(amount),
        style: const TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 30,
          color: Colors.black87,
        ),
      ),
      Row(
        mainAxisSize: MainAxisSize.min,
        textBaseline: TextBaseline.alphabetic,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        children: [
          Text(
            '$sale',
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 14,
              color: Colors.black87,
            ),
          ),
          const Text(
            ' sales',
            style: TextStyle(
              fontSize: 14,
              color: Colors.black45,
            ),
          ),
        ],
      ),
    ],
  );
}