6 Vert

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

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    buildLegendItem(
      logo:
          'https://i.pinimg.com/originals/b2/f8/28/b2f828513f21444829a619ce563d4d4e.png',
      title: 'LinkedIn',
      percent: 30,
      color: Colors.blue,
    ),
    const Gap(10),
    buildLegendItem(
      logo:
          'https://dwglogo.com/wp-content/uploads/2017/08/Octocat_logo.png',
      title: 'Github',
      percent: 65,
      color: Colors.black,
    ),
    const Gap(10),
    buildLegendItem(
      logo:
          'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png',
      title: 'Stack Overflow',
      percent: 80,
      color: Colors.orange,
    ),
  ],
),

Widget buildLegendItem({
  required String logo,
  required String title,
  required num percent,
  required Color color,
}) {
  return Container(
    padding: const EdgeInsets.fromLTRB(10, 4, 16, 4),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(8),
      color: Colors.white,
      border: Border.all(
        color: Colors.blueGrey.shade50,
      ),
    ),
    child: Row(
      children: [
        ClipOval(
          child: ExtendedImage.network(
            logo,
            width: 30,
            height: 30,
          ),
        ),
        const Gap(16),
        Expanded(
          child: Text(
            title,
            style: const TextStyle(
              fontSize: 12,
              color: Colors.black87,
            ),
          ),
        ),
        Text(
          '$percent%',
          style: TextStyle(
            fontSize: 12,
            color: color,
          ),
        ),
      ],
    ),
  );
}