Merge pull request #28 from nrise/feature/WGJS-4126

QDS Button progress type 구현
nrise · Feb 18, 2025 · e66b083 · e66b083
2 parents e53e9c6 + 68b4874
commit e66b083
Show file tree

Hide file tree

Showing 19 changed files with 1,111 additions and 374 deletions.
diff --git a/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -59,6 +59,7 @@
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
       debugServiceExtension = "internal"
+      enableGPUValidationMode = "1"
       allowLocationSimulation = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -12,6 +12,7 @@ import 'package:quantum_dots/qds_popup.dart';
 import 'package:quantum_dots/qds_progress.dart';
 import 'package:quantum_dots/qds_spinner.dart';
 import 'package:quantum_dots/qds_tooltip.dart';
+import 'package:quantum_dots_app/sample_buttons.dart';
 
 import 'dimmed_loading_test_screen.dart';
 import 'empty_states_test_screen.dart';
@@ -51,7 +52,7 @@ class DesignSystemSamplePage extends StatelessWidget {
         _buildWippyPopupComponents(context) +
         _buildWippyEmptyStatesComponents(context) +
         _buildWippySpinnerComponents(context) +
-        _buildWippyBoxButtonComponents() +
+        [SampleButtons()] +
         _buildWippyChipsComponents() +
         _buildWippyTextFieldComponents() +
         _buildQdsTextAreaComponents() +
@@ -534,58 +535,6 @@ class DesignSystemSamplePage extends StatelessWidget {
     ];
   }
 
-  List<Widget> _buildWippyBoxButtonComponents() {
-    return [
-      Wrap(
-        children: [
-          QdsBoxButton(
-            initUiState: QdsBoxButtonUiState(
-                buttonColorType: const QdsBoxButtonColorType.primary(),
-                buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'Wrap'),
-                buttonSizeType: QdsBoxButtonSizeType.large()),
-          )
-        ],
-      ),
-      QdsBoxButton(
-        initUiState: QdsBoxButtonUiState(
-            buttonColorType: const QdsBoxButtonColorType.primary(),
-            buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'Match'),
-            buttonSizeType: QdsBoxButtonSizeType.large()),
-      ),
-      QdsBoxButton(
-        initUiState: QdsBoxButtonUiState(
-            buttonColorType: const QdsBoxButtonColorType.primary(),
-            buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'debounceTime 200'),
-            buttonSizeType: QdsBoxButtonSizeType.large(),
-            debounceTime: 200),
-        onPressed: () {
-          debugPrint('debounceTime 200');
-        },
-      ),
-      QdsBoxButton(
-        initUiState: QdsBoxButtonUiState(
-          buttonColorType: const QdsBoxButtonColorType.primary(),
-          buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'debounceTime Default(400)'),
-          buttonSizeType: QdsBoxButtonSizeType.large(),
-        ),
-        onPressed: () {
-          debugPrint('debounceTime Default(400)');
-        },
-      ),
-      QdsBoxButton(
-        initUiState: QdsBoxButtonUiState(
-          buttonColorType: const QdsBoxButtonColorType.primary(),
-          buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'debounceTime 800'),
-          buttonSizeType: QdsBoxButtonSizeType.large(),
-          debounceTime: 800,
-        ),
-        onPressed: () {
-          debugPrint('debounceTime 800');
-        },
-      )
-    ];
-  }
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(

diff --git a/example/lib/sample_buttons.dart b/example/lib/sample_buttons.dart
@@ -0,0 +1,125 @@
+import 'package:flutter/widgets.dart';
+import 'package:quantum_dots/qds_button.dart';
+
+class SampleButtons extends StatefulWidget {
+  const SampleButtons({super.key});
+
+  @override
+  State<SampleButtons> createState() => _SampleButtonsState();
+}
+
+class _SampleButtonsState extends State<SampleButtons> {
+  double _progress = 0.4;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Wrap(
+          children: [
+            QdsBoxButton(
+              initUiState: QdsBoxButtonUiState(
+                  buttonColorType: const QdsBoxButtonColorType.primary(),
+                  buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'Wrap'),
+                  buttonSizeType: QdsBoxButtonSizeType.large()),
+            )
+          ],
+        ),
+        const SizedBox(height: 16),
+        SizedBox(
+          width: double.infinity,
+          child: QdsBoxButton(
+            initUiState: QdsBoxButtonUiState(
+              buttonColorType: const QdsBoxButtonColorType.primary(),
+              buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'Match'),
+              buttonSizeType: QdsBoxButtonSizeType.large(),
+            ),
+          ),
+        ),
+        const SizedBox(height: 16),
+        QdsBoxButton(
+          initUiState: QdsBoxButtonUiState(
+              buttonColorType: const QdsBoxButtonColorType.primary(),
+              buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'debounceTime 200'),
+              buttonSizeType: QdsBoxButtonSizeType.large(),
+              debounceTime: 200),
+          onPressed: () {
+            debugPrint('debounceTime 200');
+          },
+        ),
+        const SizedBox(height: 16),
+        QdsBoxButton(
+          initUiState: QdsBoxButtonUiState(
+            buttonColorType: const QdsBoxButtonColorType.primary(),
+            buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'debounceTime Default(400)'),
+            buttonSizeType: QdsBoxButtonSizeType.large(),
+          ),
+          onPressed: () {
+            debugPrint('debounceTime Default(400)');
+          },
+        ),
+        const SizedBox(height: 16),
+        QdsBoxButton(
+          initUiState: QdsBoxButtonUiState(
+            buttonColorType: const QdsBoxButtonColorType.primary(),
+            buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'debounceTime 800'),
+            buttonSizeType: QdsBoxButtonSizeType.large(),
+            debounceTime: 800,
+          ),
+          onPressed: () {
+            debugPrint('debounceTime 800');
+          },
+        ),
+        const SizedBox(height: 16),
+        SizedBox(
+          width: double.infinity,
+          child: QdsBoxButton(
+            initUiState: QdsBoxButtonUiState(
+              buttonColorType: const QdsBoxButtonColorType.primary(),
+              buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: 'Progress'),
+              buttonSizeType: QdsBoxButtonSizeType.large(),
+              state: QdsBoxButtonState.progress(progress: _progress),
+            ),
+          ),
+        ),
+        const SizedBox(height: 16),
+        SizedBox(
+          width: double.infinity,
+          child: Row(
+            children: [
+              Expanded(
+                child: QdsBoxButton(
+                  initUiState: QdsBoxButtonUiState(
+                    buttonColorType: const QdsBoxButtonColorType.secondary(),
+                    buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: '-10%'),
+                    buttonSizeType: QdsBoxButtonSizeType.medium(),
+                  ),
+                  onPressed: () {
+                    setState(() {
+                      _progress = (_progress - 0.1).clamp(0.0, 1.0);
+                    });
+                  },
+                ),
+              ),
+              const SizedBox(width: 8),
+              Expanded(
+                child: QdsBoxButton(
+                  initUiState: QdsBoxButtonUiState(
+                    buttonColorType: const QdsBoxButtonColorType.secondary(),
+                    buttonLabelType: const QdsBoxButtonLabelType.labelOnly(label: '+10%'),
+                    buttonSizeType: QdsBoxButtonSizeType.medium(),
+                  ),
+                  onPressed: () {
+                    setState(() {
+                      _progress = (_progress + 0.1).clamp(0.0, 1.0);
+                    });
+                  },
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}