added colorpicker on setup screen

client/lib/Colors/CustomColorPicker.dart

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+import '../CustomButton.dart';
+
+class CustomColorPicker extends StatefulWidget{
+  CustomColorPicker({
+    Key? key,
+    required this.pickerColor,
+    required this.onSubmit,
+    required this.size,
+  }):super(key:key);
+
+  Color pickerColor;
+  final void Function(Color) onSubmit;
+  final double size;
+
+  @override
+  State<CustomColorPicker> createState(){
+    return CustomColorPickerState();
+  }
+
+}
+
+class CustomColorPickerState extends State<CustomColorPicker>{
+  late Color pickerColor;
+  void initState(){
+    setState(() {
+      pickerColor=widget.pickerColor;
+    });
+  }
+  void changeColor(color){
+    setState((){
+      pickerColor=color;
+    });
+  }
+
+  Widget buildColorPicker(){
+    // return ColorPicker(
+    return HueRingPicker(
+          pickerColor: widget.pickerColor, 
+          onColorChanged: changeColor,
+          portraitOnly:true,
+          // enableAlpha: false,
+          // colorPickerHeight: 100,
+        );
+  }
+
+
+  
+  @override
+  Widget build(BuildContext context){
+
+    return InkWell(
+          
+          onTap: (){
+            
+            showDialog(
+                  context: context,
+                  builder: (context){
+                    return AlertDialog(
+                      content:SingleChildScrollView(
+                        child:Column(
+                          children: [
+                            // color picker widget
+                            buildColorPicker(),
+
+                            // submit button
+                            CustomButton(
+                              onPressed: (){
+                                Navigator.pop(context);
+                                widget.onSubmit(pickerColor);
+                              },
+                              child:const Text(
+                                "Submit",
+                              ),
+                            )
+                          ],
+                        ),
+                      ),
+                      
+                    );
+                    // return buildColorPicker();
+                  }
+                  
+            );
+            
+          },
+          
+          
+          customBorder:const CircleBorder(),
+          
+          child:Container(
+            width:widget.size,
+            height:widget.size,
+            margin:const EdgeInsets.all(0),
+            decoration: BoxDecoration(
+              shape:BoxShape.circle,
+              color:widget.pickerColor,
+            ),
+            // style:TextStyle(
+            //   fontSize:20,
+            //   // color: widget.pickerColor,
+            // ),
+        
+          ),
+        );
+    
+  }
+}

client/lib/CustomButton.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class CustomButton extends StatelessWidget{
+  final Widget child;
+  final VoidCallback onPressed;
+  final EdgeInsets padding;
+  final OutlinedBorder? shape;
+  const CustomButton({
+    super.key,
+    required this.onPressed,
+    required this.child,
+    this.padding = const EdgeInsets.symmetric(vertical:15,horizontal: 20),
+    this.shape = const RoundedRectangleBorder(
+      borderRadius: BorderRadius.all(Radius.circular(40)),
+    ),
+
+    });
+
+  @override
+  Widget build(BuildContext context){
+    return ElevatedButton(
+      onPressed: onPressed,
+      style:ElevatedButton.styleFrom(
+        padding:padding,
+        shape: shape,
+      ),
+      child:child,
+    );
+  }
+}

client/lib/LobbyScreen.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 
 class LobbyScreen extends StatefulWidget{
   
@@ -14,11 +15,13 @@ class LobbyScreenState extends State<LobbyScreen>{
   late SharedPreferences prefs;
   // final Future<SharedPreferences> prefs=SharedPreferences.getInstance();
   late String username;
+  late Color profileColor;
 
   @override
   void initState(){
     super.initState();
     username="";
+    profileColor=Colors.black;
     loadPreferences();
     deletePreference();
   }
@@ -26,19 +29,39 @@ class LobbyScreenState extends State<LobbyScreen>{
     prefs = await SharedPreferences.getInstance();
     setState(() {
       username= prefs.getString("username")!;
+      profileColor= colorFromHex(prefs.getString("profile_color")!)!;
     });
   }
   void deletePreference() async{
     prefs = await SharedPreferences.getInstance();
     prefs.remove('setup_done');
     prefs.remove('username');
+    prefs.remove('profile_color');
   }
   @override
   Widget build(BuildContext context){
     return Scaffold(
-      body:Center(
-        child: Text("yooooo ${username}"),
-      ),
+      body:Row(
+        children: [
+
+          Expanded(
+            child:Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children:[
+                Expanded(
+                  child: Container(
+                    child:Text("yooooo ${username}"),
+                    decoration:BoxDecoration(
+                      color:profileColor,
+                    ),
+                  ),
+                ),
+            ]),
+          
+          ),
+      ])
+      
     );
   }
 }

client/lib/SetupScreen.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:hapticlink/LobbyScreen.dart';
-// import LobbyScreen
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+import 'Colors/CustomColorPicker.dart';
+import "CustomButton.dart";
 
 class SetupScreen extends StatefulWidget{
   const SetupScreen({super.key});
@@ -16,11 +18,13 @@ class SetupScreen extends StatefulWidget{
 class _SetupScreenState extends State<SetupScreen>{
   late TextEditingController textcontroller;
   late SharedPreferences prefs;
+  late Color profileColor;
 
   @override
   void initState(){
     super.initState();
     textcontroller=TextEditingController();
+    profileColor=Colors.red.shade200;
     loadPreferences();
   }  
   
@@ -65,12 +69,18 @@ class _SetupScreenState extends State<SetupScreen>{
     );  
   }
 
+  void changeColor(color){
+    setState((){
+      profileColor=color;
+    });
+  }
+
   Widget footer(){
     return Column(
       children: [
         // Input fields
         Container(
-          margin:const EdgeInsets.only(bottom:40),
+          margin:const EdgeInsets.only(bottom:20),
           child:TextField(
             decoration: InputDecoration(
               hintText: "Enter your first name",
@@ -80,38 +90,57 @@ class _SetupScreenState extends State<SetupScreen>{
               fontSize: 20,
               fontWeight: FontWeight.w300,
             ),
-            controller: textcontroller,
-            onSubmitted: (value) => submit(),
+            controller: textcontroller,   
           ),
         ),
 
+        // Color Picker and Text in a row
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+          
+          Container(
+            margin:EdgeInsets.only(right:20),
+            child:Text("Choose your Color"),
+          ),
+
+          CustomColorPicker(
+            pickerColor: profileColor, 
+            // onColorChanged: (color){},
+            onSubmit: changeColor,
+            size:40,
+          ),
+
+        ]),
+        
+        // margin
+        const SizedBox(height: 20,),
+
         // submit button
-        ElevatedButton(
+          CustomButton(
           onPressed: ()=>submit(),
-          style:ElevatedButton.styleFrom(
-            
-            padding:const EdgeInsets.symmetric(vertical:15,horizontal: 20),
-            shape: const RoundedRectangleBorder(
-              borderRadius: BorderRadius.all(Radius.circular(40)),
-            ),
+          padding:const EdgeInsets.symmetric(vertical:15,horizontal: 20),
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(40)),
           ),
           child:const Text(
             "Join",
             style:TextStyle(
               fontSize:20,
             ),
-        
           ),
-        )
+        ),
       ],
     );  
   }
 
   void submit(){
     if(textcontroller.text.isNotEmpty){
-      // save username to Shared Preferences
+      // save username & profileColor to Shared Preferences
       prefs.setBool("setup_done", true);
       prefs.setString("username", textcontroller.text);
+      prefs.setString("profile_color", colorToHex(profileColor));
       // go to Lobby
       Navigator.pushReplacement(
         context,

client/pubspec.lock

@@ -78,6 +78,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_colorpicker:
+    dependency: "direct main"
+    description:
+      name: flutter_colorpicker
+      sha256: "458a6ed8ea480eb16ff892aedb4b7092b2804affd7e046591fb03127e8d8ef8b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.3"
   flutter_lints:
     dependency: "direct dev"
     description:

client/pubspec.yaml

@@ -10,6 +10,7 @@ dependencies:
   after_layout: ^1.2.0
   flutter:
     sdk: flutter
+  flutter_colorpicker: ^1.0.3
   shared_preferences: ^2.2.2
 
 dev_dependencies: