58360989/programmatically-lighten-or-darken-a-hex-color-in-dart

main.dart

// https://gist.github.com/NearHuscarl/29c5577b94571d00926723c85a370e43

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final veryDarkRed = darken(Colors.red, .4);
    final darkRed = darken(Colors.red, .2);
    final red = Colors.red;
    final lightRed = lighten(Colors.red);
    final veryLightRed = lighten(Colors.red, .3);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text('Button'),
              onPressed: () => {},
              style: ElevatedButton.styleFrom(
                primary: veryDarkRed,
              ),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Button'),
              onPressed: () => {},
              style: ElevatedButton.styleFrom(
                primary: darkRed,
              ),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Button'),
              onPressed: () => {},
              style: ElevatedButton.styleFrom(
                primary: red,
              ),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Button'),
              onPressed: () => {},
              style: ElevatedButton.styleFrom(
                primary: lightRed,
              ),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Button'),
              onPressed: () => {},
              style: ElevatedButton.styleFrom(
                primary: veryLightRed,
              ),
            ),
            SizedBox(height: 10),
          ],
        ),
      ),
    );
  }
}

// amount range from 0.0 to 1.0

Color darken(Color color, [double amount = .1]) {
  assert(amount >= 0 && amount <= 1);

  final hsl = HSLColor.fromColor(color);
  final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));

  return hslDark.toColor();
}

Color lighten(Color color, [double amount = .1]) {
  assert(amount >= 0 && amount <= 1);

  final hsl = HSLColor.fromColor(color);
  final hslLight = hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));

  return hslLight.toColor();
}