1. added curve category and type in a row

Vivek Chib · Vivek Chib · commit 807c32444592 · 2025-01-02T23:41:14.000+05:30
2. refactored and extracted animated boxes widget
3. added spacing getter to ScreenMode widget
diff --git a/lib/views/home_page.dart b/lib/views/home_page.dart
@@ -1,11 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_curve_visualizer/views/widgets/screen_mode.dart';
 import 'package:flutter_curve_visualizer/utils/curves_enum.dart';
-import 'package:flutter_curve_visualizer/utils/extension/string.dart';
-import 'package:flutter_curve_visualizer/views/widgets/animated_box/animated_box_widget.dart';
 import 'package:flutter_curve_visualizer/views/widgets/appbar.dart';
 import 'package:flutter_curve_visualizer/views/widgets/dropdown_menu.dart';
 import 'package:flutter_curve_visualizer/views/widgets/graph/graph_widget.dart';
+import 'widgets/animated_box/animated_boxes.dart';
 import 'widgets/code_block.dart';
 
 class HomePage extends StatefulWidget {
@@ -70,6 +69,8 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
   }
 
   void updateCurve(CurvesEnum curve) {
+    if (curve == selectedCurve) return;
+
     setState(() {
       selectedCurve = curve;
       curveAnimation.curve = curve.curve;
@@ -115,11 +116,7 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
   Widget build(BuildContext context) {
     final screenMode = ScreenModeWidget.of(context);
 
-    final double spacing = switch (screenMode) {
-      ScreenMode.mobile => 20,
-      ScreenMode.tablet => 30,
-      ScreenMode.web => 30,
-    };
+    final double spacing = screenMode.spacing;
 
     final animationWidget = Column(
       children: [
@@ -130,34 +127,7 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
         ),
 
         // Box Animations
-        SizedBox(
-          width: MediaQuery.of(context).size.width /
-              (screenMode.isMobileOrTablet ? 1 : 3),
-          child: Wrap(
-            spacing: spacing / 2,
-            runSpacing: spacing / 2,
-            runAlignment: WrapAlignment.center,
-            alignment: WrapAlignment.center,
-            children: AnimationType.values.map(
-              (animationType) {
-                return Column(
-                  mainAxisAlignment: MainAxisAlignment.start,
-                  spacing: 8.0,
-                  children: [
-                    Text(animationType.name.capitalizeFirst()),
-                    SizedBox.square(
-                      dimension: 100,
-                      child: AnimatedBoxWidget(
-                        animationType: animationType,
-                        animation: curveAnimation,
-                      ),
-                    ),
-                  ],
-                );
-              },
-            ).toList(),
-          ),
-        ),
+        AnimationBoxes(curveAnimation: curveAnimation),
       ],
     );
 
@@ -167,31 +137,45 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
       ),
       child: Column(
         mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.end,
         spacing: spacing,
         children: [
           // Code block
           CodeBlock(curve: selectedCurve),
 
-          // Curve category
-          DropdownMenuWidget<String>(
-            title: "Category",
-            value: selectedCategory,
-            items: CurvesEnum.list.keys.toList(),
-            onChanged: updateCategory,
-          ),
+          // Curve selector
+          Row(
+            spacing: 10,
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              // Curve category
+              Flexible(
+                child: DropdownMenuWidget<String>(
+                  title: "Category",
+                  value: selectedCategory,
+                  items: CurvesEnum.list.keys.toList(),
+                  onChanged: updateCategory,
+                ),
+              ),
 
-          // Curve type
-          DropdownMenuWidget<CurvesEnum>(
-            title: "Type",
-            value: selectedCurve,
-            items: CurvesEnum.list[selectedCategory]!..toList(),
-            onChanged: (value) => updateCurve(value!),
-            childBuilder: (context, value, textStyle) {
-              return Text(value.name.toString(), style: textStyle);
-            },
+              // Curve type
+              Flexible(
+                flex: 2,
+                child: DropdownMenuWidget<CurvesEnum>(
+                  title: "Type",
+                  value: selectedCurve,
+                  items: CurvesEnum.list[selectedCategory]!..toList(),
+                  onChanged: (value) => updateCurve(value!),
+                  childBuilder: (context, value, textStyle) {
+                    return Text(value.name.toString(), style: textStyle);
+                  },
+                ),
+              ),
+            ],
           ),
 
-          // Curve type
+          // Animation time
           Container(
             padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
             decoration: BoxDecoration(
@@ -256,18 +240,12 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
                 spacing: spacing,
                 children: [
                   Expanded(
-                    flex: 1,
-                    child: Align(
-                      alignment: Alignment.centerRight,
-                      child: animationWidget,
-                    ),
+                    flex: 2,
+                    child: animationWidget,
                   ),
                   Flexible(
                     flex: 1,
-                    child: Align(
-                      alignment: Alignment.centerLeft,
-                      child: controlsWidget,
-                    ),
+                    child: controlsWidget,
                   ),
                 ],
               ),
diff --git a/lib/views/widgets/animated_box/animated_boxes.dart b/lib/views/widgets/animated_box/animated_boxes.dart
@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_curve_visualizer/utils/extension/string.dart';
+import 'package:flutter_curve_visualizer/views/widgets/screen_mode.dart';
+
+import 'animated_box_widget.dart';
+
+class AnimationBoxes extends StatelessWidget {
+  const AnimationBoxes({super.key, required this.curveAnimation});
+
+  final CurvedAnimation curveAnimation;
+
+  @override
+  Widget build(BuildContext context) {
+    final screenMode = ScreenModeWidget.of(context);
+
+    final spacing = screenMode.spacing;
+
+    return SizedBox(
+      width: MediaQuery.of(context).size.width /
+          (screenMode.isMobileOrTablet ? 1 : 2),
+      child: Wrap(
+        spacing: spacing / 2,
+        runSpacing: spacing / 2,
+        runAlignment: WrapAlignment.center,
+        alignment: WrapAlignment.center,
+        children: AnimationType.values.map(
+          (animationType) {
+            return Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              spacing: 8.0,
+              children: [
+                Text(animationType.name.capitalizeFirst()),
+                SizedBox.square(
+                  dimension: 100,
+                  child: AnimatedBoxWidget(
+                    animationType: animationType,
+                    animation: curveAnimation,
+                  ),
+                ),
+              ],
+            );
+          },
+        ).toList(),
+      ),
+    );
+  }
+}
diff --git a/lib/views/widgets/dropdown_menu.dart b/lib/views/widgets/dropdown_menu.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 class DropdownMenuWidget<T> extends StatelessWidget {
+  final double? width;
   final String title;
   final T? value;
   final List<T> items;
@@ -12,6 +13,7 @@ class DropdownMenuWidget<T> extends StatelessWidget {
     super.key,
     required this.title,
     required this.items,
+    this.width,
     this.childBuilder,
     this.onChanged,
     this.value,
@@ -24,6 +26,7 @@ class DropdownMenuWidget<T> extends StatelessWidget {
     final childTextStyle = Theme.of(context).textTheme.titleMedium;
 
     return Container(
+      width: width,
       padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
       decoration: BoxDecoration(
         color: Theme.of(context).colorScheme.onPrimaryFixed,
diff --git a/lib/views/widgets/screen_mode.dart b/lib/views/widgets/screen_mode.dart
@@ -13,6 +13,12 @@ enum ScreenMode {
 
   bool get isMobileOrTablet =>
       this == ScreenMode.mobile || this == ScreenMode.tablet;
+
+  double get spacing => switch (this) {
+        ScreenMode.mobile => 10,
+        ScreenMode.tablet => 20,
+        ScreenMode.web => 20,
+      };
 }
 
 class ScreenModeWidget extends InheritedWidget {
diff --git a/makefile b/makefile
@@ -1,20 +1,24 @@
 BASE_HREF = '/'
 GITHUB_REPO := https://github.com/vchib1/vchib1.github.io.git
 
-build:
+clean:
 	@echo "Cleaning up..."
 	flutter clean
 	@echo "Getting Packages..."
 	flutter pub get
-	@echo "Building Web..."
-	flutter build web --wasm
+	@echo "Success..."
 
-deploy:
+build:
 	@echo "Cleaning up..."
 	flutter clean
 	@echo "Getting Packages..."
 	flutter pub get
 	@echo "Building Web..."
+	flutter build web --wasm
+
+deploy:
+	make clean
+	@echo "Building Web..."
 	flutter build web --base-href $(BASE_HREF) --release
 	@echo "Deploying Web to Repository..."
 	cd build/web && \
@@ -29,14 +33,9 @@ deploy:
 	@echo "Deployment Success :)"
 
 host:
+	make clean
 	flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0 --profile
 	@echo "Web server running on http://localhost:8080"
 
-clean:
-	@echo "Cleaning up..."
-	flutter clean
-	@echo "Getting Packages..."
-	flutter pub get
-	@echo "Success..."
 
 .phony: host clean deploy
