app_color

Description:

app color

app_color #
Flutter package widening a Color class which can be used to create, convert, compare colors and uses
in UI. And also for working with editing color
Getting Started #
In your flutter project add the dependency:
dependencies:
app_color: ^1.0.1
copied to clipboard
Examples #
void main() {
// HexColor
assert(AppColor.fromHex('000000') == Color(0xFF000000));
assert(AppColor.fromHex('#000000') == Color(0xFF000000));
assert(AppColor.fromHex('FFFFFFFF') == Color(0xFFFFFFFF));
assert(AppColor.fromHex('#B1000000') == Color(0xB1000000));
assert(AppColor
.fromHex('#B1000000')
.asHex == '#B1000000');

// HslColor
assert(AppColor.fromHsl(164, 100, 88) == Color(0xFFC2FFEF));

// HyzColor
assert(AppColor.fromXYZ(0.1669, 0.2293, 0.0434) == Color(0xFF659027));

// CielabColor
assert(AppColor.fromCielab(36.80, 55.20, -95.61) == Color(0xFF4832F7));
}
copied to clipboard
Make color darker or lighter
void main() {
// [black -> white] lighter by 100 percents
assert(Color(0xFF000000).lighter(100) == Color(0xFFFFFFFF));
assert(Color(0xFF000000).lx(100) == Color(0xFFFFFFFF));

// Another lighter example
assert(Color.fromARGB(255, 64, 64, 64).lighter(50) == Color.fromARGB(255, 192, 192, 192));
assert(Color.fromARGB(255, 64, 64, 64).lx(50) == Color.fromARGB(255, 192, 192, 192));

// [white -> grey] darker by 50 percents
assert(Color(0xFF000000).darker(50) == Color(0xFF808080));
assert(Color(0xFF000000).dx(50) == Color(0xFF808080));

// Another darker example
assert(Color.fromARGB(255, 192, 192, 192).darker(25) == Color.fromARGB(255, 128, 128, 128));
assert(Color.fromARGB(255, 192, 192, 192).dx(25) == Color.fromARGB(255, 128, 128, 128));
}
copied to clipboard
COLOR THEME #
import 'package:app_color/theme.dart';
import 'package:flutter/material.dart';

void main() {
ColorTheme.init(
// COLORS
background: const ColorThemeConfig(
light: ThemeColors(
primary: Colors.green,
),
dark: ThemeColors(
primary: Colors.red,
),
),
text: const ColorThemeConfig(
light: ThemeColors(
light: Colors.white,
dark: Colors.black,
),
dark: ThemeColors(
light: Colors.black,
dark: Colors.white,
),
),
colors: [
const ColorThemeData(
name: "xyz",
config: ColorThemeConfig(
light: ThemeColors(
primary: Colors.white24,
),
dark: ThemeColors(
primary: Colors.black26,
),
),
),
//... add more color theme as custom
],
// GRADIENTS
backgroundGradient: GradientThemeConfig(
light: ThemeGradients(
primary: [
Colors.white,
Colors.grey.shade400,
],
),
dark: ThemeGradients(
primary: [
Colors.black,
Colors.grey.shade900,
],
),
),
gradients: [
GradientThemeData(
name: "xyz",
config: GradientThemeConfig(
light: ThemeGradients(
primary: [
Colors.orange.shade400,
Colors.red.shade400,
],
),
dark: ThemeGradients(
primary: [
Colors.orange.shade900,
Colors.red.shade900,
],
),
),
),
//... add more gradient theme as custom
],
);
runApp(const MyApp());
}

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

@override
Widget build(BuildContext context) {
return MaterialApp(
themeMode: ThemeMode.light,
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: const Home(),
);
}
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: Container(
color: context.backgroundColor.primary,
width: double.infinity,
alignment: Alignment.center,
child: Container(
width: 200,
height: 200,
color: context.colorOf("xyz").primary,
alignment: Alignment.center,
child: Text(
"SOLID COLOR",
style: TextStyle(
color: context.dark,
),
),
),
),
),
Expanded(
child: Container(
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: context.backgroundGradient.primary ?? [],
),
),
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: context.gradientOf("xyz").primary ?? [],
),
),
child: const Text(
"GRADIENT COLOR",
style: TextStyle(color: Colors.white),
),
),
),
),
],
),
);
}
}
copied to clipboard
COLOR CUSTOMIZATION #
import 'package:app_color/color.dart';
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(
home: Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
Expanded(
child: Container(
color: Colors.white,
width: double.infinity,
child: Center(
child: SizedBox(
width: 200,
height: 200,
child: Container(
color: Colors.white.dx(10),
alignment: Alignment.center,
child: const Text("DARK 10%"),
),
),
),
),
),
Expanded(
child: Container(
color: Colors.black,
width: double.infinity,
child: Center(
child: SizedBox(
width: 200,
height: 200,
child: Container(
color: Colors.black.lx(10),
alignment: Alignment.center,
child: const Text(
"LIGHT 10%",
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.green.shade400,
width: double.infinity,
child: Center(
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.green.shade400.themeA(10),
margin: const EdgeInsets.all(32),
alignment: Alignment.center,
child: Text(
"AUTO 10%\nDETECT ON COLOR \nBRIGHTNESS",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.green.shade400.themeB(75),
),
),
),
),
),
),
),
Expanded(
child: Container(
color: Colors.green.shade600,
width: double.infinity,
child: Center(
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.green.shade600.themeA(10),
margin: const EdgeInsets.all(32),
alignment: Alignment.center,
child: Text(
"AUTO 10%\nDETECT ON COLOR \nBRIGHTNESS",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.green.shade600.themeB(75),
),
),
),
),
),
),
),
],
),
),
],
),
),
);
}
}
copied to clipboard