Skip to content

Commit

Permalink
Enhanced gradients docs and example app (#143)
Browse files Browse the repository at this point in the history 
* chore(example-app): use any compatible version of material_color_utilities

flutter_test depends on material_color_utilities, so different Flutter SDK versions require different versions of the mcu package to the point that it's impossible to pin it to a specific range.

* docs(enhanced_gradients): expand readme and the example app

* chore: exclude examples from melos packages

Example apps shouldn't be considered packages but part of a package

* chore(release): publish packages

 - [email protected]

* chore: trigger enhanced_gradients publish only on master

* docs(enhanced_gradients): Add more examples to readme

* chore: remove branch constraint from enhanced_gradients-publish action

* chore: run checks on enhanced_gradients daily

* chore(enhanced_gradients): replace 3.10.x with stable channel in gha matrix

* fix(enhanced_gradients): remove dependency on HctSolver and use Hct instead

* chore(release): publish packages

 - [email protected]

---------

Co-authored-by: Tomasz Koter <[email protected]>
  • Loading branch information
@kotertom
kotertom and kotertom authored Sep 5, 2023
1 parent f00c428 commit 8ee762c
Show file tree
Hide file tree
Showing 12 changed files with 200 additions and 32 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/enhanced_gradients-publish.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: enhanced_gradients publish

on:
push:
tags: ["enhanced_gradients-v*"]
tags: ['enhanced_gradients-v*']

jobs:
publish:
Expand Down
4 changes: 4 additions & 0 deletions .github/workflows/enhanced_gradients-test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ on:
branches: [master]
paths:
- "packages/enhanced_gradients/**"
# Run a check daily due to the dependency on `material_color_utilities: any`
schedule:
- cron: "0 17 * * *"

jobs:
test:
Expand All @@ -21,6 +24,7 @@ jobs:
matrix:
include:
- version: "3.10.0"
- channel: "stable"

defaults:
run:
Expand Down
2 changes: 1 addition & 1 deletion melos.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
name: flutter_corelibrary

packages:
- packages/**
- packages/*

scripts:
get:
Expand Down
8 changes: 8 additions & 0 deletions packages/enhanced_gradients/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
## 1.0.2

- Remove dependency on HctSolver and use Hct instead.

## 1.0.1

- Expand readme and the example app.

## 1.0.0

No changes since 1.0.0-rc1
Expand Down
10 changes: 10 additions & 0 deletions packages/enhanced_gradients/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,13 @@ colors in the HCT color system in Flutter animations.
[pub-badge-link]: https://pub.dev/packages/enhanced_gradients
[build-badge]: https://img.shields.io/github/actions/workflow/status/leancodepl/flutter_corelibrary/enhanced_gradients-test.yml?branch=master
[build-badge-link]: https://github.com/leancodepl/flutter_corelibrary/actions/workflows/enhanced_gradients-test.yml

## Examples

The following examples are screenshots taken in the example app of randomly generated gradients. Note that the HCT gradients might not always look better than the regular ones, as it is all subjective and depends on the desired effect.

![First screenshot with gradient comparison](art/example-1.png)

![Second screenshot with gradient comparison](art/example-2.png)

![Third screenshot with gradient comparison](art/example-3.png)
Binary file added packages/enhanced_gradients/art/example-1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/enhanced_gradients/art/example-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/enhanced_gradients/art/example-3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion packages/enhanced_gradients/example/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
# example

A new Flutter project.
This example app displays a simple comparison between regular and enhanced gradients. The simplest way to
start it is to run it via `flutter run -d chrome`. Use the floating action button to shuffle gradients' colors.

![Screenshot with gradient comparison](../art/example-1.png)
192 changes: 169 additions & 23 deletions packages/enhanced_gradients/example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,56 +53,202 @@ class _MainAppState extends State<MainApp> {

@override
Widget build(BuildContext context) {
final gradient = LinearGradient(colors: _colors, stops: _stops);
final linearGradient = LinearGradient(
colors: _colors,
stops: _stops,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
);
final radialGradient = RadialGradient(colors: _colors, stops: _stops);
final sweepGradient = SweepGradient(colors: _colors, stops: _stops);

return MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _randomizeGradient,
child: const Icon(Icons.shuffle),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
body: ListView(
children: [
_GradientPreview(
title: 'Regular LinearGradient',
gradient: gradient,
const SizedBox(height: 24),
const Text(
'Regular gradient (first half) vs Enhanced gradient (second half)',
textAlign: TextAlign.center,
),
const SizedBox(height: 8),
Center(
child: _LinearGradientComparison(
gradientA: linearGradient,
gradientB: linearGradient.enhanced(),
),
),
const SizedBox(height: 16),
_GradientPreview(
title: 'Enhanced LinearGradient',
gradient: gradient.enhanced(),
Center(
child: _RadialGradientComparison(
gradientA: radialGradient,
gradientB: radialGradient.enhanced(),
),
),
const SizedBox(height: 16),
_SweepGradientComparison(
gradientA: sweepGradient,
gradientB: sweepGradient.enhanced(),
),
const SizedBox(height: 24),
],
),
),
);
}
}

class _GradientPreview extends StatelessWidget {
const _GradientPreview({
required this.title,
required this.gradient,
class _LinearGradientComparison extends StatelessWidget {
const _LinearGradientComparison({
required this.gradientA,
required this.gradientB,
});

final Gradient gradientA;
final Gradient gradientB;

@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: gradientA,
),
child: const SizedBox(
width: double.infinity,
),
),
),
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: gradientB,
),
child: const SizedBox(
width: double.infinity,
),
),
),
],
),
);
}
}

class _RadialGradientComparison extends StatelessWidget {
const _RadialGradientComparison({
required this.gradientA,
required this.gradientB,
});

final String title;
final Gradient gradient;
final RadialGradient gradientA;
final RadialGradient gradientB;

@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
return Stack(
children: [
const SizedBox(
width: 200,
height: 200,
),
Positioned.fill(
child: Align(
alignment: Alignment.centerLeft,
child: ClipRect(
child: SizedBox(
width: 100,
height: 200,
child: OverflowBox(
alignment: Alignment.centerLeft,
maxWidth: double.infinity,
child: SizedBox(
width: 200,
height: 200,
child: DecoratedBox(
decoration: BoxDecoration(
gradient: gradientA,
),
child: const SizedBox(
width: 200,
height: 200,
),
),
),
),
),
),
),
),
Positioned.fill(
child: Align(
alignment: Alignment.centerRight,
child: ClipRect(
child: SizedBox(
width: 100,
height: 200,
child: OverflowBox(
alignment: Alignment.centerRight,
maxWidth: double.infinity,
child: SizedBox(
width: 200,
height: 200,
child: DecoratedBox(
decoration: BoxDecoration(
gradient: gradientB,
),
child: const SizedBox(
width: 200,
height: 200,
),
),
),
),
),
),
),
),
],
);
}
}

class _SweepGradientComparison extends StatelessWidget {
const _SweepGradientComparison({
required this.gradientA,
required this.gradientB,
});

final Gradient gradientA;
final Gradient gradientB;

@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(title),
const SizedBox(height: 8),
DecoratedBox(
decoration: BoxDecoration(
gradient: gradient,
decoration: BoxDecoration(gradient: gradientA),
child: const SizedBox(
width: 200,
height: 200,
),
),
DecoratedBox(
decoration: BoxDecoration(gradient: gradientB),
child: const SizedBox(
width: double.infinity,
height: 48,
width: 200,
height: 200,
),
),
],
Expand Down
5 changes: 1 addition & 4 deletions packages/enhanced_gradients/lib/src/hct_color_tween.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import 'dart:ui';

import 'package:enhanced_gradients/src/lerp_utils.dart';
import 'package:flutter/animation.dart';
import 'package:material_color_utilities/hct/hct_solver.dart';
import 'package:material_color_utilities/material_color_utilities.dart';

/// A Color [Tween] interpolated in the HCT color space provided by the package
Expand Down Expand Up @@ -37,9 +36,7 @@ Color _lerpHctNonNullable(Color colorA, Color colorB, double t) {
final tone = lerpDouble(beginHct.tone, endHct.tone, t)!;

return Color(
// This is a slight optimization over calling
// `Hct.from(hue, chroma, tone).toInt()`
HctSolver.solveToInt(hue, chroma, tone),
Hct.from(hue, chroma, tone).toInt(),
).withOpacity(opacity);
}

Expand Down
4 changes: 2 additions & 2 deletions packages/enhanced_gradients/pubspec.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: enhanced_gradients
version: 1.0.0
version: 1.0.2
homepage: https://github.com/leancodepl/flutter_corelibrary/tree/master/packages/enhanced_gradients
repository: https://github.com/leancodepl/flutter_corelibrary
description: >-
Expand All @@ -13,7 +13,7 @@ dependencies:
collection: ^1.17.1
flutter:
sdk: flutter
material_color_utilities: ^0.2.0
material_color_utilities: any

dev_dependencies:
flutter_test:
Expand Down

0 comments on commit 8ee762c

Please sign in to comment.