Flutter™ Gradient Generator
-
-
+
+
+
+
-
+
+
+
Flutter™ Gradient Generator
+
+
-
-
-
-
-
-
+
+
+
+ 
button,
+ - add more colors by clicking the + button.
-5. Enter the color stops.
+5. **Enter the color stops.**
+
+6. **Click on "Copy Gradient Code" and the code will be copied to your clipboard.**
-6. Click on "Copy Gradient Code" and the code will be copied to your clipboard.
## Running
1. Clone the repository
@@ -61,19 +69,20 @@ Flutter Gradient Generator is a web app that generates linear, radial and sweep
- [x] Color picker
- [x] Color stops
- [x] Addition of more colors
-- [ ] Addition of more gradient styles
+- [x] Gradient samples
+- [x] Downloading gradient as image
+- [ ] Addition of more gradient styles
+- [ ] Text gradients
- [ ] CSS to Flutter converter
- [ ] Dark mode
## Contact
-Victor Eronmosele - victoreronmosele@gmail.com
-
Project Link: [https://github.com/victoreronmosele/flutter_gradient_generator](https://github.com/victoreronmosele/flutter_gradient_generator)
## Acknowledgments
-* [CSS Gradient Generator](https://www.css-gradient.com/) for the visual design inspiration.
+* [Gradient samples](https://github.com/ghosh/uiGradients/blob/master/gradients.json) are from [uiGradients](https://uigradients.com/).
## License
diff --git a/devtools_options.yaml b/devtools_options.yaml
new file mode 100644
index 0000000..7e7e7f6
--- /dev/null
+++ b/devtools_options.yaml
@@ -0,0 +1 @@
+extensions:
diff --git a/lib/data/app_colors.dart b/lib/data/app_colors.dart
index 33e6868..b075155 100644
--- a/lib/data/app_colors.dart
+++ b/lib/data/app_colors.dart
@@ -22,4 +22,18 @@ class AppColors {
(color: _initialGradientEndColor, stop: _initialGradientEndStop)
];
}
+
+ //TODO: Make this dependent on the theme and set it to
+ //[_previewBackgroundLight] or [_previewBackgroundDark] accordingly
+ static const previewBackground = _previewBackgroundLight;
+ static const _previewBackgroundLight = Color(0xfff5f5f5);
+ // ignore: unused_field
+ static const _previewBackgroundDark = Color(0xff1e1e1e);
+
+ static const toolBar = Color(0xff2c2c2c);
+ static const toolBarIcon = white;
+ static final toolBarIconHover = white.withOpacity(0.08);
+ static final toolBarIconFocus = white.withOpacity(0.12);
+
+ static final colorPickerBorder = grey;
}
diff --git a/lib/data/app_dimensions.dart b/lib/data/app_dimensions.dart
index efad11e..a604ed7 100644
--- a/lib/data/app_dimensions.dart
+++ b/lib/data/app_dimensions.dart
@@ -1,3 +1,5 @@
+import 'dart:math';
+
import 'package:flutter/material.dart';
/// Holds the dimensions of the app.
@@ -18,13 +20,17 @@ class AppDimensions extends InheritedWidget {
super.key,
required super.child,
required Orientation orientation,
- required double screenWidth,
+ required this.screenWidth,
+ required this.screenHeight,
}) : shouldDisplayPortraitUI = (orientation == Orientation.portrait) &&
(screenWidth < _portraitModeMaxWidth) {
generatorScreenWidth =
shouldDisplayPortraitUI ? screenWidth : _landscapeGeneratorScreenWidth;
}
+ final double screenHeight;
+ final double screenWidth;
+
final double deleteButtonIconSize = 16;
/// Whether the app should display the portrait UI.
@@ -60,17 +66,56 @@ class AppDimensions extends InheritedWidget {
numberOfCompactButtonPerRow;
double get compactButtonHeight => 32;
double get compactButtonPadding => 16;
+
double get wideButtonWidth => generatorScreenContentWidth;
double get wideButtonHeight => 48;
double get widebuttonPadding => 24;
- double get expansionIconSize => 20;
+ double get expansionIconSize => 16;
+
double get selectionContainerMainTitleWidth => (generatorScreenContentWidth -
(compactButtonWidth + (2 * compactButtonMargin) + expansionIconSize));
+ double get bannerAdHorizontalPadding => generatorScreenHorizontalPadding;
+
+ double get toolBarHeight => 48;
+
+ double get chooseRandomGradientIconButtonSize => 16;
+
+ double get sampleTitleBottomMargin => 2.0;
+
+ // Using 6 instead of 16 to match the design due to additional space
+ // added by the shuffle button in the `ColorAndStopSelectionWidget`
+ double get sampleSectionVerticalPadding => 6.0;
+
+ double get footerVerticalPadding => 8.0;
+
+ double get samplesListViewSize =>
+ screenHeight -
+ ((chooseRandomGradientIconButtonSize * 2) +
+ sampleTitleBottomMargin +
+ (2 * sampleSectionVerticalPadding) +
+ (2 * toolBarHeight) +
+ (2 * footerVerticalPadding) +
+ (4 * sampleSectionVerticalPadding) +
+ 16.0 +
+ (3 * 14.0) +
+ (3 * 8.0) +
+ (2 * sampleSectionVerticalPadding));
+
+ double get _minimumPreviewSectionWidth => generatorScreenWidth;
+
+ double get previewSectionWidth => max(
+ screenWidth - (2 * generatorScreenWidth), _minimumPreviewSectionWidth);
+
+ double get toolBarIconButtonSize => 20;
+
+ /// Ensure to update this method when adding new properties or constructor
+ /// parameters that should trigger a rebuild when changed.
@override
bool updateShouldNotify(covariant AppDimensions oldWidget) {
return oldWidget.shouldDisplayPortraitUI != shouldDisplayPortraitUI ||
- oldWidget.generatorScreenWidth != generatorScreenWidth;
+ oldWidget.screenWidth != screenWidth ||
+ oldWidget.screenHeight != screenHeight;
}
static AppDimensions? maybeOf(BuildContext context) {
diff --git a/lib/data/app_strings.dart b/lib/data/app_strings.dart
index 5d425a0..f863056 100644
--- a/lib/data/app_strings.dart
+++ b/lib/data/app_strings.dart
@@ -1,29 +1,39 @@
class AppStrings {
- static const String appTitle = 'Flutter Gradient Generator';
- static final String appTitleNewLine = appTitle.replaceAll(' ', ' \n');
- static const String copyGradientCode = 'Copy Gradient Code';
- static const String gradientCodeCopied = 'Copied to Clipboard!';
- static const String style = 'Style';
- static const String linear = 'Linear';
- static const String radial = 'Radial';
- static const String colors = 'Colors';
- static const String colorsAndStops = 'Colors & Stops';
- static const String random = 'Random';
- static const String direction = 'Direction';
- static const String victorEronmosele = 'Victor Eronmosele';
- static const String built = 'Built';
- static const String by = 'by';
- static const String tapToEdit = 'Tap to edit';
- static const String enterInPercentage = 'Enter in %';
- static const String sweep = 'Sweep';
- static const String addColor = 'Add Color';
- static const String deleteColor = 'Delete Color';
+ static const appTitle = 'Flutter Gradient Generator';
+ static const copyGradientCode = 'Copy Gradient Code';
+ static const gradientCodeCopied = 'Copied to Clipboard!';
+ static const style = 'Style';
+ static const linear = 'Linear';
+ static const radial = 'Radial';
+ static const colors = 'Colors';
+ static const colorsAndStops = 'Colors & Stops';
+ static const random = 'Random';
+ static const direction = 'Direction';
+ static const tapToEdit = 'Tap to edit';
+ static const enterInPercentage = 'Enter in %';
+ static const sweep = 'Sweep';
+ static const addColor = 'Add Color';
+ static const deleteColor = 'Delete Color';
+ static const github = 'GitHub';
+ static const builtBy = 'Built by';
+ static const victorEronmosele = 'Victor Eronmosele';
+ static const shareFeedback = 'Share Feedback';
+ static const samples = 'Samples';
+ static const chooseRandomGradient = 'Choose Random Gradient';
+ static const reportBug = 'Report Bug';
+ static const requestFeature = 'Request Feature';
+ static const giveFeedback = 'Give Feedback';
+ static const viewSourceCodeOnGitHub = 'View Source Code On GitHub';
+ static const downloadGradientAsImage = 'Download Gradient As Image';
/// URLs
static const githubUrl =
'https://github.com/victoreronmosele/flutter_gradient_generator';
- static const personalWebsiteUrl = 'http://victoreronmosele.com/';
-
- /// Firebase Analytics
- static const gradientGeneratedFirebaseAnalyticsKey = 'gradientGenerated';
+ static const bugReportUrl =
+ '$githubUrl/issues/new?assignees=&labels=&projects=&template=bug_report.md&title=';
+ static const featureRequestUrl =
+ '$githubUrl/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=';
+ static const feedbackUrl = '$githubUrl/discussions/new?category=general';
+ static const victorEronmoseleWebsiteUrl = 'http://victoreronmosele.com/';
+ static const appWebsiteUrl = 'https://fluttergradientgenerator.com/';
}
diff --git a/lib/data/app_typedefs.dart b/lib/data/app_typedefs.dart
index 3a01da6..1889087 100644
--- a/lib/data/app_typedefs.dart
+++ b/lib/data/app_typedefs.dart
@@ -10,3 +10,8 @@ typedef ColorAndStop = ({
Color color,
Stop stop,
});
+
+/// [FlutterGradientConverter] is a function that converts [colors] and optional
+/// [stops] to a [Gradient] from Flutter's painting library.
+typedef FlutterGradientConverter = Gradient Function(
+ {required List