Flutter examples of a color swatch next to a label.

color_swatch.dart

// Flutter examples of a color swatch next to a label.
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            const Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.deepPurple, // your colour
                radius: 8,
              ),
              label: const Text('Purple Chip'),
            ),
            ListTile(
              leading: Container(
                width: 24,
                height: 24,
                decoration: const BoxDecoration(
                  color: Colors.teal,
                  shape: BoxShape.circle,
                ),
              ),
              title: const Text('Teal ListTile'),
            ),
            ColourCard(),            
          ],
        ),
      ),
    );
  }
}

class ColourCard extends StatelessWidget {
  const ColourCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      // MD3 cards have rounded corners and subtle elevation
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      // Padding inside the card
      child: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            // The coloured square (you could also use CircleAvatar)
            Container(
              width: 24,
              height: 24,
              decoration: BoxDecoration(
                color: Colors.orangeAccent, // <-- your colour
                shape: BoxShape.circle,
                //borderRadius: BorderRadius.circular(4),
              ),
            ),
            const SizedBox(width: 12), // spacing between colour & text
            const Text(
              'Orange Accent Card',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}