12 Horiz

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

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    buildLegendItem(Colors.green, 'Retail', 2390),
    const Gap(24),
    buildLegendItem(Colors.blue, 'Ecommerce', 1804),
    const Gap(24),
    buildLegendItem(Colors.red, 'CMS', 2387),
  ],
),

Widget buildLegendItem(Color color, String title, num data) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        title,
        style: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 12,
          color: color,
        ),
      ),
      Row(
        mainAxisSize: MainAxisSize.min,
        textBaseline: TextBaseline.alphabetic,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        children: [
          Text(
            NumberFormat.currency(
              symbol: '',
              decimalDigits: 0,
            ).format(data),
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 24,
              color: Colors.black87,
            ),
          ),
          const Gap(4),
          const Text(
            'Sales',
            style: TextStyle(
              fontWeight: FontWeight.w400,
              fontSize: 12,
              color: Colors.black38,
            ),
          ),
        ],
      ),
    ],
  );
}