Merge pull request #226 from Rhishikesh12/labels

[Feature Implimented] Fixing Bug in Labels Card Functionality and Implimentation of Labels Page

lib/data/widget_category.dart

@@ -9,7 +9,8 @@ import 'package:flutter_component_ui/ui_components/pricing_cards/pricing_cards.d
 import 'package:flutter_component_ui/ui_components/segmented_controls/segmented_control_screen.dart';
 import 'package:flutter_component_ui/ui_components/steppers/steppers.dart';
 
-import '../ui_components/bottom_navbars/bottom_navbars.dart';
+
+import '../ui_components/labels/lables.dart';
 import '../ui_components/radios/radios.dart';
 import '../ui_components/sliders/sliders.dart';
 
@@ -24,7 +25,7 @@ final List<Map<String, dynamic>> widgetCategoryData = [
   },
   {
     'categoryName': 'Labels',
-    'categoryScreen': const AvatarScreen(),
+    'categoryScreen': const LabelScreen(),
   },
   {
     'categoryName': 'Bottom Navigation Bars',

lib/ui_components/labels/all_labels/action_label/action_label.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+// ignore: camel_case_types
+class ActionLabels extends StatefulWidget {
+  const ActionLabels({super.key});
+
+  @override
+  // ignore: library_private_types_in_public_api
+  _ActionLabelsState createState() => _ActionLabelsState();
+}
+
+// ignore: camel_case_types
+class _ActionLabelsState extends State<ActionLabels> {
+  final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
+
+  @override
+  Widget build(BuildContext context) {
+    bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
+    Color iconColor = Colors.white;
+    Color textColor = isDarkMode ? Colors.amberAccent : Colors.black;
+    Color shapeBorderColor =
+        isDarkMode ? Colors.amberAccent : Colors.blueAccent;
+
+    return Scaffold(
+      key: _key,
+      body: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          ActionChip(
+            elevation: 5.0,
+            padding: const EdgeInsets.all(2.0),
+            avatar: CircleAvatar(
+              backgroundColor:
+                  isDarkMode ? Colors.amberAccent : Colors.blue[800],
+              child: Icon(
+                Icons.phone,
+                color: iconColor,
+                size: 20,
+              ),
+            ),
+            label: Text(
+              ' Make a call',
+              style: TextStyle(color: textColor, fontWeight: FontWeight.w500),
+            ),
+            onPressed: () {
+              ScaffoldMessenger.of(context).showSnackBar(
+                const SnackBar(
+                  content: Text(
+                    'Calling...',
+                    style: TextStyle(
+                      color: Colors.white,
+                    ),
+                  ),
+                ),
+              );
+            },
+            backgroundColor: isDarkMode ? Colors.grey[700] : Colors.grey[200],
+            shape: StadiumBorder(
+              side: BorderSide(
+                width: 1,
+                color: shapeBorderColor,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/ui_components/labels/all_labels/basic_label.dart/basic_label.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class BasicChipWidget extends StatelessWidget {
+  const BasicChipWidget({
+    Key? key,
+    required this.basicChipLabel,
+    required this.chipColor,
+  }) : super(key: key);
+
+  final String basicChipLabel;
+  final Color chipColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Chip(
+      //   padding: EdgeInsets.symmetric(horizontal: 20),
+      avatar: CircleAvatar(
+        child: Text(basicChipLabel[0].toUpperCase()),
+      ),
+      label: Text(
+        basicChipLabel,
+        style: TextStyle(color: Colors.white),
+      ),
+      backgroundColor: chipColor,
+    );
+  }
+}

lib/ui_components/labels/all_labels/choice_label/choice_label.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+
+class ChoiceChipWidget extends StatefulWidget {
+  const ChoiceChipWidget({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  State<ChoiceChipWidget> createState() => _ChoiceChipWidgetState();
+}
+
+class _ChoiceChipWidgetState extends State<ChoiceChipWidget> {
+  List choice = ["google", "facebook", "twitter", "amazon"];
+  int choiceIndex = 0;
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    return Container(
+      height: size.height * 0.4,
+      child: ListView.builder(
+        itemCount: choice.length,
+        scrollDirection: Axis.horizontal,
+        itemBuilder: (BuildContext context, int index) {
+          return Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 4.0),
+            child: ChoiceChip(
+              label: Text(
+                choice[index],
+                style: const TextStyle(
+                  color: Colors.white,
+                  fontWeight: FontWeight.w500,
+                  fontSize: 15,
+                ),
+              ),
+              avatar: const CircleAvatar(
+                backgroundColor: Colors.white,
+                child: Icon(
+                  Icons.home,
+                  color: Colors.blue,
+                ),
+              ),
+              selected: choiceIndex == index,
+              selectedColor: Colors.blue[900],
+              onSelected: (value) {
+                setState(() {
+                  choiceIndex = value ? index : 0;
+                });
+              },
+              backgroundColor: Colors.blueAccent,
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

lib/ui_components/labels/all_labels/filter_label/filter_label.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+
+class FilterChipWidget extends StatefulWidget {
+  const FilterChipWidget({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  State<FilterChipWidget> createState() => _FilterChipWidgetState();
+}
+
+class _FilterChipWidgetState extends State<FilterChipWidget> {
+  List friends = [
+    Friend("First", Colors.purple, false),
+    Friend("Second", Colors.cyan, false),
+    Friend("Third", Colors.blue, false),
+  ];
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      spacing: 4,
+      children: getFilteredFriend(),
+    );
+  }
+
+  List<Widget> getFilteredFriend() {
+    List<Widget> chips = [];
+    for (int i = 0; i < friends.length; i++) {
+      Widget item = Padding(
+        padding: const EdgeInsets.symmetric(
+          vertical: 5,
+          horizontal: 4,
+        ),
+        child: FilterChip(
+          label: Text(friends[i].label),
+          labelStyle: const TextStyle(color: Colors.white),
+          backgroundColor: friends[i].color,
+          selected: friends[i].isSelected,
+          onSelected: (value) {
+            setState(() {
+              friends[i].isSelected = value;
+            });
+          },
+        ),
+      );
+      chips.add(item);
+    }
+    return chips;
+  }
+}
+
+class Friend {
+  String label;
+  Color color;
+  bool isSelected;
+  Friend(this.label, this.color, this.isSelected);
+}

lib/ui_components/labels/all_labels/input_label/input_labels.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+
+class InputLables extends StatefulWidget {
+  const InputLables({Key? key}) : super(key: key);
+
+  @override
+  State<InputLables> createState() => _InputLablesState();
+}
+
+class _InputLablesState extends State<InputLables> {
+  bool _isSelected = false;
+
+  @override
+  Widget build(BuildContext context) {
+    bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
+
+    return Scaffold(
+      body: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          InputChip(
+            padding: const EdgeInsets.all(2.0),
+            avatar: const CircleAvatar(
+              backgroundColor: Colors.white38,
+              child: Text(
+                'JD',
+                style: TextStyle(color: Colors.black45),
+              ),
+            ),
+            label: const Text(
+              'Jane Doe',
+              style: TextStyle(color: Colors.white),
+            ),
+            backgroundColor: isDarkMode ? Colors.grey[600] : Colors.purple[400],
+            selected: _isSelected,
+            selectedColor: Colors.blue.shade600,
+            onSelected: (bool selected) {
+              setState(() {
+                _isSelected = selected;
+              });
+            },
+            onDeleted: () {},
+          ),
+        ],
+      ),
+    );
+  }
+}