5 Horiz
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildLegendItem(
35,
'Series 1 title',
Colors.deepPurple.shade700,
),
const Gap(12),
buildLegendItem(
60,
'Series 2 title',
Colors.deepPurple.shade300,
),
const Gap(12),
buildLegendItem(
20,
'Series 3 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: 50,
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'$percent%',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.black87,
height: 1,
),
),
const Gap(4),
Text(
title,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 12,
color: Colors.grey.shade400,
height: 1,
),
),
],
),
),
],
),
);
}