handle sorting

Author: AhmedAbdoElhawary

lib/features/sorting/view/sorting_page.dart

@@ -31,11 +31,16 @@ class SortingPage extends StatelessWidget {
           },
         ),
       ),
-      body: const Stack(
+      body: Stack(
         alignment: AlignmentDirectional.bottomCenter,
         children: [
-          Align(alignment: AlignmentDirectional.topCenter, child: _BuildList()),
-          _InteractionButton(),
+          const Align(alignment: AlignmentDirectional.topCenter, child: _BuildList()),
+          // _ControlButtons(),
+          const Align(alignment: AlignmentDirectional.bottomCenter, child: _InteractionButton()),
+          ...List.generate(
+            SortingNotifier.sortingAlgorithms.length,
+            (index) => _SelectedOperation(index),
+          ),
         ],
       ),
     );
@@ -47,11 +52,47 @@ class _InteractionButton extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    return const Column(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        _ControlButtons(),
-      ],
+    return const _ControlButtons();
+  }
+}
+
+class _SelectedOperation extends ConsumerWidget {
+  const _SelectedOperation(this.index);
+  final int index;
+  @override
+  Widget build(BuildContext context, ref) {
+    final algo = SortingNotifier.sortingAlgorithms[index];
+    final isChanged = ref.watch(_notifierProvider).selectedAlgorithms.contains(algo);
+    final width = SortingNotifier.calculateButtonWidth(index);
+
+    return AnimatedPositionedDirectional(
+      duration: const Duration(milliseconds: 300),
+      start: width,
+      bottom: isChanged ? 100 : 0,
+      // width: width,
+      child: CustomRoundedElevatedButton(
+        roundedRadius: 3,
+        backgroundColor: ThemeEnum.whiteD7Color,
+        child: RegularText(algo.name, fontSize: 14),
+        onPressed: () {
+          ref.read(_notifierProvider.notifier).selectAlgorithm(index);
+        },
+      ),
+    );
+  }
+}
+
+class Item extends StatelessWidget {
+  final String text;
+
+  const Item({super.key, required this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(10),
+      color: context.getColor(ThemeEnum.whiteD7Color),
+      child: RegularText(text, color: ThemeEnum.primaryColor),
     );
   }
 }
@@ -61,7 +102,7 @@ class _BuildList extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final items = ref.watch(_notifierProvider).list;
+    final items = ref.watch(_notifierProvider.select((state) => state.list));
 
     return Padding(
       padding: const EdgeInsets.only(top: 15),

lib/features/sorting/view_model/sorting_notifier.dart

@@ -1,4 +1,6 @@
 import 'package:algorithm_visualizer/core/helpers/screen_size.dart';
+import 'package:algorithm_visualizer/core/resources/theme_manager.dart';
+import 'package:algorithm_visualizer/core/widgets/adaptive/text/adaptive_text.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -9,6 +11,9 @@ part 'sorting_state.dart';
 
 enum SortingEnum { played, stopped, none }
 
+enum SortingAlgorithm { bubble, selection, merge, quick }
+
+//SortingAlgorithm
 class SortableItem {
   final int id;
   final int value;
@@ -28,10 +33,45 @@ class SortingNotifier extends StateNotifier<SortingNotifierState> {
   SortingEnum _operation = SortingEnum.none;
   CancelableOperation<void>? _cancelableBubbleSort;
 
+  static const List<SortingAlgorithm> widthButtons = [
+    SortingAlgorithm.bubble,
+    SortingAlgorithm.selection,
+    SortingAlgorithm.merge,
+    SortingAlgorithm.quick,
+  ];
+
+  static const List<SortingAlgorithm> sortingAlgorithms = [
+    SortingAlgorithm.bubble,
+    SortingAlgorithm.selection,
+    SortingAlgorithm.merge,
+    SortingAlgorithm.quick,
+  ];
+
+  void selectAlgorithm(int index) {
+    final target = sortingAlgorithms[index];
+    final selected = [...state.selectedAlgorithms];
+    final targetIndex = selected.indexOf(target);
+
+    if (targetIndex != -1) {
+      selected.removeAt(targetIndex);
+    } else {
+      selected.add(target);
+    }
+    state = state.copyWith(selectedAlgorithms: selected);
+  }
+
   static List<SortableItem> generateList() {
     return List.generate(_listSize, (index) => SortableItem(index, index + 1))..shuffle();
   }
 
+  static double calculateButtonWidth(int index) {
+    double width = 0;
+    for (int i = 0; i <= index; i++) {
+      width += sortingAlgorithms[index].name.length *5;
+    }
+    return width;
+  }
+
   static double calculateItemWidth(BuildContext context) {
     final screenWidth = MediaQuery.of(context).size.width;
     final availableWidth = screenWidth - (itemsPadding * (_listSize - 1));

lib/features/sorting/view_model/sorting_state.dart

@@ -3,16 +3,19 @@ part of 'sorting_notifier.dart';
 class SortingNotifierState {
   final List<SortableItem> list;
   final Map<int, Offset> positions;
+  final List<SortingAlgorithm> selectedAlgorithms;
 
-  SortingNotifierState({required this.list, this.positions = const {}});
+  SortingNotifierState({required this.list, this.positions = const {}, this.selectedAlgorithms = const []});
 
   SortingNotifierState copyWith({
     List<SortableItem>? list,
     Map<int, Offset>? positions,
+    List<SortingAlgorithm>? selectedAlgorithms,
   }) {
     return SortingNotifierState(
       list: list ?? this.list,
       positions: positions ?? this.positions,
+      selectedAlgorithms: selectedAlgorithms ?? this.selectedAlgorithms,
     );
   }
 }

pubspec.lock

@@ -441,10 +441,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: f652077d0bdf60abe4c1f6377448e8655008eef28f128bc023f7b5e8dfeb48fc
+      sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
       url: "https://pub.dev"
     source: hosted
-    version: "14.2.4"
+    version: "14.2.5"
   web:
     dependency: transitive
     description: