📰 improved project view

lib/app/configs.dart

@@ -24,56 +24,74 @@ mixin PersonalDetails {
       "https://api.github.com/users/$githubUserName/repos";
   static List<Project> projectsList = [
     Project(
+        id: "0",
+        type: ["Website"],
         title: "Hostel Management",
         githubLink: "https://github.com/shashiben/Hostel-Management",
         websiteLink: "https://hostel-app-test.herokuapp.com/login",
         description:
             "Created a hostel management web app to track students where they are, and download data of attendance for each day",
         tools: ["Redux", "Node Js", "Express Js", "Mongo DB", "React Js"]),
     Project(
+        id: "1",
+        type: ["Website"],
         title: "E Commerce",
         githubLink: "https://github.com/shashiben/MERN-ECommerce",
         websiteLink: "https://nsd-solutions.herokuapp.com/",
         description:
             "An ECommerce application similar to amazon or flipkart where users can buy products,contains admin panel",
         tools: ["Redux", "Node Js", "Express Js", "Mongo DB", "React Js"]),
     Project(
+        id: "2",
+        type: ["Application"],
         title: "Flutter Custom Graph",
         githubLink: "https://github.com/shashiben/flutter_custom_graph",
         description:
             "Created a flutter package for building customized and aesthetic graphs.Built with the help of custom graphs.",
         tools: ["Flutter"]),
     Project(
+        id: "3",
+        type: ["Application"],
         title: "Face Mask Detection",
         githubLink: "https://github.com/shashiben/flutter-face-mask-detection",
         description:
             "Mobile Application to detect whether person wears a mask or not.Built with Flutter and tensorflow lite.",
         tools: ["Flutter", "Tflite", "CNN", "Python"]),
     Project(
+        id: "4",
+        type: ["Website"],
         title: "FReMP Stack",
         githubLink: "https://github.com/shashiben/FReMP-Stack",
         description:
             "Created a simple application to show how to perform crud operations using flask,react and mongo db and includes how to search by name.",
         tools: ["Flask", "React", "Mongo DB", "Python"]),
     Project(
+        id: "5",
+        type: ["Opencv"],
         title: "Motion Detection Using OpenCv",
         githubLink: "https://github.com/shashiben/Motion-Detection-with-Opencv",
         description:
             "Detects motion of an object or a person and draws bounding box over it",
         tools: ["Python", "OpenCv"]),
     Project(
+        id: "6",
+        type: ["Website", "Application"],
         title: "Alarm Managaer",
         githubLink: "https://github.com/shashiben/Flutter-Alarm",
         description:
             "An application to schedule alarms on multiple devices supports for both android and ios,built using mongo db and flutter.",
         tools: ["Flutter", "Mongo DB", "Node Js", "Express Js"]),
     Project(
+        id: "7",
+        type: ["Application", "Website"],
         title: "Cache With Hive",
         githubLink: "https://github.com/shashiben/Flutter-anime",
         description:
             "Application which shows how to cache rest api data,so that user can view data even though he is offline.Presently supports for web, android and ios",
         tools: ["Flutter", "Hive"]),
     Project(
+        id: "8",
+        type: ["Application"],
         title: "College Fest App",
         playstoreLink:
             "https://play.google.com/store/apps/details?id=com.cse.cynosure",
@@ -82,13 +100,17 @@ mixin PersonalDetails {
             "Created an app for college fest where users can register for events and get live notifications regarding events and has payment gateway integration.",
         tools: ["Java", "Firebase", "Paytm"]),
     Project(
+        id: "9",
+        type: ["Website", "Application"],
         websiteLink: "https://shashiben.github.io",
         description:
             "Created portfolio using flutter,Supports for mac os,windows,linux,web,ios,android",
         githubLink: "https://github.com/shashiben/portfolio",
         title: "Portfolio",
         tools: ["Flutter"]),
     Project(
+        id: "10",
+        type: ["Backend"],
         title: "Node Mailer",
         githubLink: "https://github.com/shashiben/node-mailer",
         description:

lib/core/models/project.dart

@@ -7,11 +7,15 @@ class Project {
   final String title;
   final String description;
   final List<String> tools;
+  final String id;
+  final List<String> type;
 
   Project(
       {this.githubLink,
       this.websiteLink,
       this.playstoreLink,
+      @required this.id,
+      @required this.type,
       @required this.title,
       @required this.description,
       @required this.tools});

lib/ui/views/projects/project_view_desktop.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_neumorphic/flutter_neumorphic.dart';
 import 'package:portfolio/core/utils/ScreenUiHelper.dart';
 import 'package:portfolio/ui/views/projects/project_view_model.dart';
 import 'package:portfolio/ui/widgets/grid_view_widget.dart';
@@ -35,6 +36,33 @@ class ProjectDesktopView extends StatelessWidget {
                   ),
                 ),
                 uiHelpers.verticalSpaceHigh,
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 100),
+                  child: NeumorphicToggle(
+                    onChanged: (value) => model.changeIndex(value),
+                    children: [
+                      ToggleElement(
+                          foreground: Center(child: Text("All")),
+                          background: Center(
+                            child: Text("All"),
+                          )),
+                      ToggleElement(
+                          foreground: Center(child: Text("Mobile Applications")),
+                          background: Center(child: Text("Applications"))),
+                      ToggleElement(
+                          foreground: Center(child: Text("Web Applications")),
+                          background: Center(child: Text("Web Applications"))),
+                      ToggleElement(
+                          foreground: Center(child: Text("Others")),
+                          background: Center(child: Text("Others")))
+                    ],
+                    thumb: SizedBox(),
+                    selectedIndex: model.index,
+                  ),
+                ),
+                SizedBox(
+                  height: 25,
+                ),
                 Expanded(
                   child: SingleChildScrollView(
                     child: Column(
@@ -44,7 +72,7 @@ class ProjectDesktopView extends StatelessWidget {
                             padding:
                                 const EdgeInsets.symmetric(horizontal: 100),
                             child: ResponsiveGridRow(
-                              children: model.list,
+                              children: model.getProjects(),
                             )),
                       ],
                     ),

lib/ui/views/projects/project_view_model.dart

@@ -4,16 +4,62 @@ import 'package:portfolio/ui/widgets/projectWidget.dart';
 import 'package:stacked/stacked.dart';
 
 class ProjectViewModel extends BaseViewModel {
+  int index = 0;
+  Map<String, List<ResponsiveGridCol>> mapList = {};
+  changeIndex(int n) {
+    index = n;
+    notifyListeners();
+  }
+
+  List<String> knowTypes = ["Application", "Website"];
+
+  Map<int, String> typeList = {
+    0: "All",
+    1: "Application",
+    2: "Website",
+    3: "Others"
+  };
+
+  getProjects() {
+    return mapList[typeList[index]];
+  }
+
   List<ResponsiveGridCol> list = [];
   init() {
+    mapList["All"] = [];
+    mapList["Others"] = [];
     for (int i = 0; i < PersonalDetails.projectsList.length; i++) {
-      list.add(ResponsiveGridCol(
+      for (String s in PersonalDetails.projectsList[i].type) {
+        if (knowTypes.contains(s)) {
+          if (mapList[s] == null) {
+            mapList[s] = [
+              ResponsiveGridCol(
+                  xl: 4,
+                  md: 6,
+                  child: ProjectWidget(
+                      index: i, project: PersonalDetails.projectsList[i]))
+            ];
+          } else {
+            mapList[s].add(ResponsiveGridCol(
+                xl: 4,
+                md: 6,
+                child: ProjectWidget(
+                    index: i, project: PersonalDetails.projectsList[i])));
+          }
+        } else {
+          mapList["Others"].add(ResponsiveGridCol(
+              xl: 4,
+              md: 6,
+              child: ProjectWidget(
+                  index: i, project: PersonalDetails.projectsList[i])));
+        }
+      }
+      mapList["All"].add(ResponsiveGridCol(
           xl: 4,
           md: 6,
           child: ProjectWidget(
               index: i, project: PersonalDetails.projectsList[i])));
     }
-
     notifyListeners();
   }
 }