Merge pull request #71 from victoreronmosele/feature/html-color-picker

Replace Color Picker Package With HTML Color Input

README.md

@@ -28,14 +28,13 @@ Flutter Gradient Generator is a web app that generates linear, radial and sweep
    - bottom-right
 
 4. Choose the gradient colors. You can either 
-   - use the color pickers to select your colors or,
-   - use random colors by clicking the random button
+   - 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.
 
-5. Enter the color stops. The default color stops are:
-   - 0% and
-   - 100%. 
+5. Enter the color stops. 
 
-6. Click on "Get 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,7 +60,7 @@ Flutter Gradient Generator is a web app that generates linear, radial and sweep
 - [x] Sweep gradient
 - [x] Color picker
 - [x] Color stops
-- [ ] Addition of more colors
+- [x] Addition of more colors
 - [ ] Addition of more gradient styles
 - [ ] CSS to Flutter converter
 - [ ] Dark mode
@@ -75,7 +74,6 @@ Project Link: [https://github.com/victoreronmosele/flutter_gradient_generator](h
 ## Acknowledgments
 
 * [CSS Gradient Generator](https://www.css-gradient.com/) for the visual design inspiration.
-* [Cyclop](https://github.com/rxlabz/cyclop) for the color picker
 
 
 ## License

lib/data/app_colors.dart

@@ -1,8 +1,25 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_gradient_generator/data/app_typedefs.dart';
 
 class AppColors {
-  static final Color grey = Colors.grey.shade200;
-  static const Color darkGrey = Color(0xff3d4853);
-  static const Color white = Colors.white;
-  static const Color black = Colors.black;
+  static final grey = Colors.grey.shade200;
+  static const darkGrey = Color(0xff3d4853);
+  static const white = Colors.white;
+  static const black = Colors.black;
+
+  /// Initial gradient colors
+  static const _initialGradientStartColor = Color(0xffFC466B);
+  static const _initialGradientEndColor = Color(0xff3F5EFB);
+
+  /// Initial gradient stops
+  static const _initialGradientStartStop = 25;
+  static const _initialGradientEndStop = 75;
+
+  /// Returns the initial list of [ColorAndStop]s that can be showned on the [GeneratorSection]
+  static get initialColorAndStopList {
+    return [
+      (color: _initialGradientStartColor, stop: _initialGradientStartStop),
+      (color: _initialGradientEndColor, stop: _initialGradientEndStop)
+    ];
+  }
 }

lib/data/app_dimensions.dart

@@ -25,6 +25,8 @@ class AppDimensions extends InheritedWidget {
         shouldDisplayPortraitUI ? screenWidth : _landscapeGeneratorScreenWidth;
   }
 
+  final double deleteButtonIconSize = 16;
+
   /// Whether the app should display the portrait UI.
   final bool shouldDisplayPortraitUI;
 

lib/data/app_strings.dart

@@ -1,7 +1,7 @@
 class AppStrings {
   static const String appTitle = 'Flutter Gradient Generator';
   static final String appTitleNewLine = appTitle.replaceAll(' ', ' \n');
-  static const String getGradientCode = 'Get Gradient Code';
+  static const String copyGradientCode = 'Copy Gradient Code';
   static const String gradientCodeCopied = 'Copied to Clipboard!';
   static const String style = 'Style';
   static const String linear = 'Linear';

lib/main.dart

@@ -5,6 +5,8 @@ import 'package:flutter_gradient_generator/data/app_fonts.dart';
 import 'package:flutter_gradient_generator/data/app_strings.dart';
 import 'package:flutter_gradient_generator/firebase_options.dart';
 import 'package:flutter_gradient_generator/ui/screens/home_screen.dart';
+import 'package:flutter_gradient_generator/view_models/gradient_view_model.dart';
+import 'package:provider/provider.dart';
 import 'package:url_strategy/url_strategy.dart';
 
 void main() async {
@@ -17,22 +19,39 @@ void main() async {
   runApp(const MyApp());
 }
 
-class MyApp extends StatelessWidget {
+class MyApp extends StatefulWidget {
   const MyApp({Key? key}) : super(key: key);
 
+  @override
+  State<MyApp> createState() => _MyAppState();
+}
+
+class _MyAppState extends State<MyApp> {
+  late final GradientViewModel gradientViewModel;
+
+  @override
+  void initState() {
+    super.initState();
+
+    gradientViewModel = GradientViewModel();
+  }
+
   @override
   Widget build(BuildContext context) {
     return OrientationBuilder(builder: (context, orientation) {
       final width = MediaQuery.of(context).size.width;
 
-      return AppDimensions(
-        orientation: orientation,
-        screenWidth: width,
-        child: MaterialApp(
-          title: AppStrings.appTitle,
-          debugShowCheckedModeBanner: false,
-          theme: ThemeData(textTheme: AppFonts.getTextTheme(context)),
-          home: const HomeScreen(),
+      return MaterialApp(
+        title: AppStrings.appTitle,
+        debugShowCheckedModeBanner: false,
+        theme: ThemeData(textTheme: AppFonts.getTextTheme(context)),
+        home: AppDimensions(
+          orientation: orientation,
+          screenWidth: width,
+          child: ChangeNotifierProvider.value(
+            value: gradientViewModel,
+            child: const HomeScreen(),
+          ),
         ),
       );
     });