Skip to content

Instantly share code, notes, and snippets.

@dumazy
Created November 26, 2023 12:24
Show Gist options
  • Save dumazy/2a6167ab2ad1b2b86598458adb69b77a to your computer and use it in GitHub Desktop.
Save dumazy/2a6167ab2ad1b2b86598458adb69b77a to your computer and use it in GitHub Desktop.
ColorScheme.formSeed
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: const Color(0xFF3F9A40),
),
useMaterial3: true,
),
home: const Scheme(),
);
}
}
class Scheme extends StatelessWidget {
const Scheme({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(crossAxisCount: 4, children: [
ColorSchemeBox(
color: Theme.of(context).colorScheme.primary,
name: 'primary',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onPrimary,
name: 'onPrimary',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.primaryContainer,
name: 'primaryContainer',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onPrimaryContainer,
name: 'onPrimaryContainer',
),
/// second line
ColorSchemeBox(
color: Theme.of(context).colorScheme.secondary,
name: 'secondary',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onSecondary,
name: 'onSecondary',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.secondaryContainer,
name: 'secondaryContainer',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onSecondaryContainer,
name: 'onSecondaryContainer',
),
/// 3rd line
ColorSchemeBox(
color: Theme.of(context).colorScheme.tertiary,
name: 'tertiary',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onTertiary,
name: 'onTertiary',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.tertiaryContainer,
name: 'tertiaryContainer',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onTertiaryContainer,
name: 'onTertiaryContainer',
),
/// 4th line
ColorSchemeBox(
color: Theme.of(context).colorScheme.error,
name: 'error',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onError,
name: 'onError',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.errorContainer,
name: 'errorContainer',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onErrorContainer,
name: 'onErrorContainer',
),
/// 5th line
ColorSchemeBox(
color: Theme.of(context).colorScheme.background,
name: 'background',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onBackground,
name: 'onBackground',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.surface,
name: 'surface',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onSurface,
name: 'onSurface',
),
/// 6th line
ColorSchemeBox(
color: Theme.of(context).colorScheme.outline,
name: 'outline',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.surfaceVariant,
name: 'surfaceVariant',
),
ColorSchemeBox(
color: Theme.of(context).colorScheme.onSurfaceVariant,
name: 'onSurfaceVariant',
),
]),
);
}
}
class ColorSchemeBox extends StatelessWidget {
const ColorSchemeBox({super.key, required this.color, required this.name});
final Color color;
final String name;
@override
Widget build(BuildContext context) {
final luminance = color.computeLuminance();
print("Luminance for $name is $luminance");
final contrastColor = luminance > 0.5 ? Colors.black : Colors.white;
return Container(
color: color,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SelectableText(
name,
style: TextStyle(color: contrastColor, fontSize: 24),
),
const SizedBox(height: 8),
SelectableText(
color.value.toRadixString(16).toUpperCase(),
style: TextStyle(color: contrastColor, fontSize: 18),
),
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment