Improve UI and architecture (#15)

* Fix deprecations * Increase opacity to make letters above the sliders more readable * Improve color of app bar and button (especially in dark mode) * Make title of sliders look the same everywhere and move to own class * Create folder structure pickers for picker pages and widgets/ for smaller widgets * Simplify code * Make text and button height aligned * Make SliderTitle Text widgets vertically aligned * Improve opacity of SliderTitle's left text * Rename methods * Improve ui (padding, remove underline in portrait mode) * Auto-update files * Auto-format example/pubspec.yaml * Update version and changelog * Update flutter_lints * Improve UI * Improve UI * Improve UI * User BorderRadius.circular constructor * Make padding on SliderTitle symmetric to better support RTL layout * Use SizedBox for whitespace * Use Container instead of Padding plus SizedBox and DecoratedBox * Use BorderRadius.circular constructor * Refactor SliderTitle * Improve UI * Add alignment and margin to Row instead of each of its children
fluttercandies · Sep 20, 2021 · 6fc8650 · 6fc8650
1 parent 11675d6
commit 6fc8650
Show file tree

Hide file tree

Showing 21 changed files with 129 additions and 166 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## [1.2.0]
+
+* Update deprecated theme color (accentColor -> colorScheme.secondary)
+* Improve UI
+* Refactor folder structure
+
 ## [1.1.0]
 
 * Fix ColorPicker not shown in landscape mode

diff --git a/example/ios/Flutter/AppFrameworkInfo.plist b/example/ios/Flutter/AppFrameworkInfo.plist
@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>8.0</string>
+  <string>9.0</string>
 </dict>
 </plist>
diff --git a/example/ios/Runner.xcodeproj/project.pbxproj b/example/ios/Runner.xcodeproj/project.pbxproj
@@ -284,7 +284,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				TARGETED_DEVICE_FAMILY = "1,2";
@@ -361,7 +361,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -408,7 +408,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				TARGETED_DEVICE_FAMILY = "1,2";

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -4,9 +4,7 @@ import 'package:flutter/widgets.dart';
 
 import 'main_page.dart';
 
-void main() async {
-  runApp(const MyApp());
-}
+void main() => runApp(const MyApp());
 
 class MyApp extends StatelessWidget {
   const MyApp({Key? key}) : super(key: key);

diff --git a/example/lib/main_page.dart b/example/lib/main_page.dart
@@ -181,7 +181,7 @@ class _MainPageState extends State<MainPage> {
 
   Widget buildDrawerHeader() {
     return DrawerHeader(
-      decoration: BoxDecoration(color: theme.accentColor),
+      decoration: const BoxDecoration(color: Colors.blue),
       child: Stack(
         children: <Widget>[
           // Avatar
@@ -196,10 +196,13 @@ class _MainPageState extends State<MainPage> {
                   backgroundColor: theme.cardColor,
                   backgroundImage: const AssetImage('packages/avatar.jpg'),
                 ),
-                Container(height: 10.0),
-                const Text(
-                  '淹死的鱼ysdy44',
-                  style: TextStyle(color: Colors.white, fontSize: 18.0),
+                const SizedBox(height: 10.0),
+                const Padding(
+                  padding: EdgeInsets.only(bottom: 8),
+                  child: Text(
+                    '淹死的鱼ysdy44',
+                    style: TextStyle(color: Colors.white, fontSize: 18.0),
+                  ),
                 )
               ],
             ),
@@ -211,7 +214,7 @@ class _MainPageState extends State<MainPage> {
             child: ElevatedButton(
               onPressed: setTheme,
               style: ElevatedButton.styleFrom(
-                primary: theme.accentColor,
+                primary: Colors.blue.shade400,
                 shape: const StadiumBorder(),
               ),
               child: Text(

diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -13,10 +13,10 @@ dependencies:
     path: ../
 
 dev_dependencies:
-  flutter_lints: ^1.0.3
+  flutter_lints: ^1.0.4
 
 flutter:
   uses-material-design: true
-  
+
   assets:
-   - packages/avatar.jpg
+    - packages/avatar.jpg
diff --git a/lib/flutter_hsvcolor_picker.dart b/lib/flutter_hsvcolor_picker.dart
@@ -1,14 +1,14 @@
 library flutter_hsvcolor_picker;
 
-export 'src/alpha_picker.dart';
+export 'src/widgets/alpha_picker.dart';
 export 'src/color_picker.dart';
-export 'src/hex_picker.dart';
-export 'src/hsv_picker.dart';
-export 'src/palette_hue_picker.dart';
-export 'src/palette_picker.dart';
-export 'src/palette_saturation_picker.dart';
-export 'src/palette_value_picker.dart';
-export 'src/rgb_picker.dart';
-export 'src/slider_picker.dart';
-export 'src/swatches_picker.dart';
-export 'src/wheel_picker.dart';
+export 'src/widgets/hex_picker.dart';
+export 'src/pickers/hsv_picker.dart';
+export 'src/pickers/palette_hue_picker.dart';
+export 'src/widgets/palette_picker.dart';
+export 'src/pickers/palette_saturation_picker.dart';
+export 'src/pickers/palette_value_picker.dart';
+export 'src/pickers/rgb_picker.dart';
+export 'src/widgets/slider_picker.dart';
+export 'src/pickers/swatches_picker.dart';
+export 'src/pickers/wheel_picker.dart';
diff --git a/lib/src/color_picker.dart b/lib/src/color_picker.dart
@@ -1,14 +1,14 @@
 import 'package:flutter/material.dart';
 
-import 'alpha_picker.dart';
-import 'hex_picker.dart';
-import 'hsv_picker.dart';
-import 'palette_hue_picker.dart';
-import 'palette_saturation_picker.dart';
-import 'palette_value_picker.dart';
-import 'rgb_picker.dart';
-import 'swatches_picker.dart';
-import 'wheel_picker.dart';
+import 'widgets/alpha_picker.dart';
+import 'widgets/hex_picker.dart';
+import 'pickers/hsv_picker.dart';
+import 'pickers/palette_hue_picker.dart';
+import 'pickers/palette_saturation_picker.dart';
+import 'pickers/palette_value_picker.dart';
+import 'pickers/rgb_picker.dart';
+import 'pickers/swatches_picker.dart';
+import 'pickers/wheel_picker.dart';
 
 enum Picker {
   swatches,
@@ -195,10 +195,10 @@ class _ColorPickerState extends State<ColorPicker> {
         child: Text(
           item.name,
           style: _index == _pickers.indexOf(item)
-              ? Theme.of(context)
-                  .textTheme
-                  .headline5
-                  ?.copyWith(fontSize: 18, color: Theme.of(context).accentColor)
+              ? Theme.of(context).textTheme.headline5?.copyWith(
+                    fontSize: 18,
+                    color: Theme.of(context).colorScheme.secondary,
+                  )
               : Theme.of(context).textTheme.headline5?.copyWith(fontSize: 18),
         ),
       ),
@@ -244,18 +244,16 @@ class _ColorPickerState extends State<ColorPicker> {
     );
   }
 
-  Widget _buildDropdown() {
+  Widget _buildDropdownLandscapeMode() {
     return SizedBox(
       height: 38,
       child: Material(
         type: MaterialType.button,
         color: Theme.of(context).cardColor,
         shadowColor: Colors.black26,
         elevation: 4.0,
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.all(
-            Radius.circular(2.0),
-          ),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(2.0),
         ),
         child: DropdownButton<_IPicker>(
           iconSize: 32.0,
@@ -272,27 +270,25 @@ class _ColorPickerState extends State<ColorPicker> {
     );
   }
 
-  Widget _buildDropdown2() {
-    return SizedBox(
+  Widget _buildDropdownPortraitMode() {
+    return Container(
+      margin: const EdgeInsets.symmetric(vertical: 6.0),
       height: 38,
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          border: Border.all(color: Theme.of(context).dividerColor),
-          borderRadius: const BorderRadius.all(
-            Radius.circular(3.0),
-          ),
-        ),
-        child: DropdownButton<_IPicker>(
-          iconSize: 32.0,
-          isExpanded: true,
-          isDense: true,
-          style: Theme.of(context).textTheme.headline5?.copyWith(fontSize: 20),
-          value: _pickers[_index],
-          onChanged: (_IPicker? value) => super.setState(
-            () => _pickerOnChanged(value),
-          ),
-          items: _pickers.map(_buildDropdownMenuItems).toList(),
+      decoration: BoxDecoration(
+        border: Border.all(color: Theme.of(context).dividerColor),
+        borderRadius: BorderRadius.circular(3.0),
+      ),
+      child: DropdownButton<_IPicker>(
+        iconSize: 32.0,
+        isExpanded: true,
+        isDense: true,
+        style: Theme.of(context).textTheme.headline5?.copyWith(fontSize: 20),
+        value: _pickers[_index],
+        onChanged: (_IPicker? value) => super.setState(
+          () => _pickerOnChanged(value),
         ),
+        items: _pickers.map(_buildDropdownMenuItems).toList(),
+        underline: const SizedBox(),
       ),
     );
   }
@@ -321,7 +317,7 @@ class _ColorPickerState extends State<ColorPicker> {
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
             _buildHead(),
-            _buildDropdown2(),
+            _buildDropdownPortraitMode(),
             _buildBody(),
             _buildAlphaPicker(),
           ],
@@ -336,7 +332,7 @@ class _ColorPickerState extends State<ColorPicker> {
                 mainAxisSize: MainAxisSize.min,
                 children: <Widget>[
                   _buildHead(),
-                  _buildDropdown(),
+                  _buildDropdownLandscapeMode(),
                   _buildAlphaPicker(),
                 ],
               ),

diff --git a/lib/src/hsv_picker.dart → lib/src/pickers/hsv_picker.dart b/lib/src/hsv_picker.dart → lib/src/pickers/hsv_picker.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
-import 'slider_picker.dart';
+import '../widgets/slider_picker.dart';
+import '../widgets/slider_title.dart';
 
 /// Three sliders for selections a color via:
 /// Hue
@@ -55,39 +56,13 @@ class _HSVPickerState extends State<HSVPicker> {
         color.withValue(1.0).toColor(),
       ];
 
-  Widget buildTitle(String title, String text) {
-    return SizedBox(
-      height: 34.0,
-      child: Row(
-        children: <Widget>[
-          Opacity(
-            opacity: 0.5,
-            child: Text(title, style: Theme.of(context).textTheme.headline6),
-          ),
-          Expanded(
-            child: Align(
-              alignment: Alignment.centerRight,
-              child: Text(
-                text,
-                style: Theme.of(context)
-                    .textTheme
-                    .headline5
-                    ?.copyWith(fontSize: 18),
-              ),
-            ),
-          )
-        ],
-      ),
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     return Column(
       mainAxisSize: MainAxisSize.min,
       children: <Widget>[
         // Hue
-        buildTitle('H', '${color.hue.toInt()}º'),
+        SliderTitle('H', '${color.hue.toInt()}º'),
         SliderPicker(
           value: color.hue,
           max: 360.0,
@@ -96,15 +71,15 @@ class _HSVPickerState extends State<HSVPicker> {
         ),
 
         // Saturation
-        buildTitle('S', '${(color.saturation * 100).toInt()}º'),
+        SliderTitle('S', '${(color.saturation * 100).toInt()}º'),
         SliderPicker(
           value: color.saturation,
           onChanged: saturationOnChange,
           colors: saturationColors,
         ),
 
         // Value
-        buildTitle('L', '${(color.value * 100).toInt()}º'),
+        SliderTitle('L', '${(color.value * 100).toInt()}º'),
         SliderPicker(
           value: color.value,
           onChanged: valueOnChange,

diff --git a/lib/src/palette_hue_picker.dart → lib/src/pickers/palette_hue_picker.dart b/lib/src/palette_hue_picker.dart → lib/src/pickers/palette_hue_picker.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
-import 'palette_picker.dart';
-import 'slider_picker.dart';
+import '../widgets/palette_picker.dart';
+import '../widgets/slider_picker.dart';
 
 /// Color palette and color slider
 class PaletteHuePicker extends StatefulWidget {

diff --git a/lib/src/palette_saturation_picker.dart → ...rc/pickers/palette_saturation_picker.dart b/lib/src/palette_saturation_picker.dart → ...rc/pickers/palette_saturation_picker.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
-import 'palette_picker.dart';
-import 'slider_picker.dart';
+import '../widgets/palette_picker.dart';
+import '../widgets/slider_picker.dart';
 
 class PaletteSaturationPicker extends StatefulWidget {
   const PaletteSaturationPicker({

diff --git a/lib/src/palette_value_picker.dart → lib/src/pickers/palette_value_picker.dart b/lib/src/palette_value_picker.dart → lib/src/pickers/palette_value_picker.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
-import 'palette_picker.dart';
-import 'slider_picker.dart';
+import '../widgets/palette_picker.dart';
+import '../widgets/slider_picker.dart';
 
 class PaletteValuePicker extends StatefulWidget {
   const PaletteValuePicker({