5 Vert

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

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    buildLegendItem(
      35,
      'Series one title',
      Colors.deepPurple.shade700,
    ),
    const Gap(12),
    buildLegendItem(
      60,
      'Series two title',
      Colors.deepPurple.shade300,
    ),
    const Gap(12),
    buildLegendItem(
      20,
      'Series three title',
      Colors.purple,
    ),
  ],
),

Widget buildLegendItem(num percent, String title, Color color) {
  return DecoratedBox(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.white,
      boxShadow: [
        BoxShadow(
          color: Colors.blueGrey.shade50,
          blurRadius: 6,
          offset: const Offset(0, 2),
        ),
      ],
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 6,
          height: 40,
          decoration: BoxDecoration(
            color: color,
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(8),
              bottomLeft: Radius.circular(8),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            textBaseline: TextBaseline.alphabetic,
            crossAxisAlignment: CrossAxisAlignment.baseline,
            children: [
              Text(
                '$percent%',
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 20,
                  color: Colors.black87,
                ),
              ),
              const Gap(12),
              Text(
                title,
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 12,
                  color: Colors.grey.shade400,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}