Update UI (Add Samples, Add Image Download, Add Feedback)

.github/workflows/firebase-hosting-merge.yml

@@ -15,13 +15,13 @@ jobs:
           java-version: "12.x"
       - uses: subosito/flutter-action@v1
         with:
-          flutter-version: "3.13.6"
+          flutter-version: "3.16.9"
           channel: stable
       - run: echo $FIREBASE_CONFIG | base64 -d > lib/firebase_options.dart
         env:
           FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }}
       - run: flutter pub get
-      - run: flutter build web --release --no-tree-shake-icons
+      - run: flutter build web --release
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/firebase-hosting-pull-request.yml

@@ -13,13 +13,13 @@ jobs:
           java-version: "12.x"
       - uses: subosito/flutter-action@v1
         with:
-          flutter-version: "3.13.6"
+          flutter-version: "3.16.9"
           channel: stable
       - run: echo $FIREBASE_CONFIG | base64 -d > lib/firebase_options.dart
         env:
           FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }}
       - run: flutter pub get
-      - run: flutter build web --release --no-tree-shake-icons 
+      - run: flutter build web --release 
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.metadata

@@ -4,7 +4,27 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: 1d9032c7e1d867f071f2277eb1673e8f9b0274e3
-  channel: stable
+  revision: "41456452f29d64e8deb623a3c927524bcf9f111b"
+  channel: "stable"
 
 project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: 41456452f29d64e8deb623a3c927524bcf9f111b
+      base_revision: 41456452f29d64e8deb623a3c927524bcf9f111b
+    - platform: web
+      create_revision: 41456452f29d64e8deb623a3c927524bcf9f111b
+      base_revision: 41456452f29d64e8deb623a3c927524bcf9f111b
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

README.md

@@ -9,14 +9,18 @@ Flutter Gradient Generator is a web app that generates linear, radial and sweep
 
 ## Usage
 
-1. Visit the [web app](https://fluttergradientgenerator.com/).
+1. **Visit the [web app](https://fluttergradientgenerator.com/).**
 
-2. Choose the gradient style. The options are:
+2. **Choose the gradient style.** 
+
+    The options are:
    - linear
    - radial
    - sweep
 
-3. Choose the gradient direction. The options are:
+3. **Choose the gradient direction.** 
+
+    The options are:
    - top-left
    - top-center
    - top-right
@@ -27,14 +31,18 @@ Flutter Gradient Generator is a web app that generates linear, radial and sweep
    - bottom-center
    - bottom-right
 
-4. Choose the gradient colors. You can either 
+4. **Choose the gradient colors.** 
+
+    You can: 
    - use the color pickers to select your colors,
-   - generate random colors by clicking the "Random" button or 
-   - add more colors by clicking the "Add Color" button.
+   - click on a gradient sample to use the sample's colors,
+   - use a random gradient sample by clicking on the <img src="./shuffle.svg" alt="shuffle" width="12"/> button,
+   - add more colors by clicking the &#43; 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

devtools_options.yaml

@@ -0,0 +1 @@
+extensions:

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;
 }

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) {

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/';
 }

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<Color> colors, List<double>? stops});