diff --git a/lib/data/widget_category.dart b/lib/data/widget_category.dart index e0babbd..41c6d65 100644 --- a/lib/data/widget_category.dart +++ b/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> widgetCategoryData = [ }, { 'categoryName': 'Labels', - 'categoryScreen': const AvatarScreen(), + 'categoryScreen': const LabelScreen(), }, { 'categoryName': 'Bottom Navigation Bars', diff --git a/lib/ui_components/labels/all_labels/action_label/action_label.dart b/lib/ui_components/labels/all_labels/action_label/action_label.dart new file mode 100644 index 0000000..6e01127 --- /dev/null +++ b/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 { + final GlobalKey _key = GlobalKey(); + + @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, + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/ui_components/labels/all_labels/basic_label.dart/basic_label.dart b/lib/ui_components/labels/all_labels/basic_label.dart/basic_label.dart new file mode 100644 index 0000000..43ceb76 --- /dev/null +++ b/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, + ); + } +} diff --git a/lib/ui_components/labels/all_labels/choice_label/choice_label.dart b/lib/ui_components/labels/all_labels/choice_label/choice_label.dart new file mode 100644 index 0000000..17b624f --- /dev/null +++ b/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 createState() => _ChoiceChipWidgetState(); +} + +class _ChoiceChipWidgetState extends State { + 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, + ), + ); + }, + ), + ); + } +} diff --git a/lib/ui_components/labels/all_labels/filter_label/filter_label.dart b/lib/ui_components/labels/all_labels/filter_label/filter_label.dart new file mode 100644 index 0000000..f538733 --- /dev/null +++ b/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 createState() => _FilterChipWidgetState(); +} + +class _FilterChipWidgetState extends State { + 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 getFilteredFriend() { + List 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); +} diff --git a/lib/ui_components/labels/all_labels/input_label/input_labels.dart b/lib/ui_components/labels/all_labels/input_label/input_labels.dart new file mode 100644 index 0000000..d000b9d --- /dev/null +++ b/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 createState() => _InputLablesState(); +} + +class _InputLablesState extends State { + 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: () {}, + ), + ], + ), + ); + } +} diff --git a/lib/ui_components/labels/lables.dart b/lib/ui_components/labels/lables.dart new file mode 100644 index 0000000..1b28da5 --- /dev/null +++ b/lib/ui_components/labels/lables.dart @@ -0,0 +1,466 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_component_ui/provider/favorite_provider.dart'; +import 'package:flutter_component_ui/ui_components/labels/all_labels/basic_label.dart/basic_label.dart'; +import 'package:flutter_component_ui/ui_components/labels/all_labels/choice_label/choice_label.dart'; + +import 'package:provider/provider.dart'; + +import '../../theme/theme.dart'; +import 'all_labels/action_label/action_label.dart'; +import 'all_labels/filter_label/filter_label.dart'; +import 'all_labels/input_label/input_labels.dart'; + +class LabelScreen extends StatefulWidget { + const LabelScreen({super.key}); + + @override + State createState() => LabelScreenState(); +} + +class LabelScreenState extends State { + final basicLabelList = [ + const BasicChipWidget( + basicChipLabel: 'Basic Chip', chipColor: Colors.blueAccent), + ]; + List basicLabelListColor = [null]; + + final actionLabelList = [ + const ActionLabels(), + ]; + List actionLabelListColor = [null]; + + final inputLabelList = [ + const InputLables(), + ]; + List inputLabelListColor = [null]; + + final choiceLabelList = [ + const ChoiceChipWidget(), + ]; + List choiceLabelListColor = [null]; + + final filterLabelList = [ + const FilterChipWidget(), + ]; + List filterLabelListColor = [null]; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: SingleChildScrollView( + child: Column( + // mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Basic Label", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + basicLabelList.length, + (index) => Consumer( + builder: (context, favProviderModel, child) => Column( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: 400.0, // Set the minimum width constraint + maxWidth: 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: basicLabelList[index], + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 3, 20, 3), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Add to favorite'), + const SizedBox( + width: 5, + ), + GestureDetector( + onTap: () { + favProviderModel.add( + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: + 400.0, // Set the minimum width constraint + maxWidth: + 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: basicLabelList[index], + ), + ); + setState(() { + basicLabelListColor[index] = Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: basicLabelListColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Action Label", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + actionLabelList.length, + (index) => Consumer( + builder: (context, favProviderModel, child) => Column( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: 400.0, // Set the minimum width constraint + maxWidth: 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: actionLabelList[index], + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 3, 20, 3), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Add to favorite'), + const SizedBox( + width: 5, + ), + GestureDetector( + onTap: () { + favProviderModel.add( + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: + 400.0, // Set the minimum width constraint + maxWidth: + 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: actionLabelList[index], + ), + ); + setState(() { + actionLabelListColor[index] = Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: actionLabelListColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Input Label", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + inputLabelList.length, + (index) => Consumer( + builder: (context, favProviderModel, child) => Column( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: 400.0, // Set the minimum width constraint + maxWidth: 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: inputLabelList[index], + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 3, 20, 3), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Add to favorite'), + const SizedBox( + width: 5, + ), + GestureDetector( + onTap: () { + favProviderModel.add( + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: + 400.0, // Set the minimum width constraint + maxWidth: + 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: inputLabelList[index], + ), + ); + setState(() { + inputLabelListColor[index] = Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: inputLabelListColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Choice Label", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + choiceLabelList.length, + (index) => Consumer( + builder: (context, favProviderModel, child) => Column( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: 400.0, // Set the minimum width constraint + maxWidth: 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: choiceLabelList[index], + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 3, 20, 3), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Add to favorite'), + const SizedBox( + width: 5, + ), + GestureDetector( + onTap: () { + favProviderModel.add( + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: + 400.0, // Set the minimum width constraint + maxWidth: + 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: choiceLabelList[index], + ), + ); + setState(() { + choiceLabelListColor[index] = Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: choiceLabelListColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Filter Label", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + filterLabelList.length, + (index) => Consumer( + builder: (context, favProviderModel, child) => Column( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: 400.0, // Set the minimum width constraint + maxWidth: 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: filterLabelList[index], + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 3, 20, 3), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Add to favorite'), + const SizedBox( + width: 5, + ), + GestureDetector( + onTap: () { + favProviderModel.add( + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: + 400.0, // Set the minimum width constraint + maxWidth: + 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 70.0, // Set the maximum height constraint + ), + child: filterLabelList[index], + ), + ); + setState(() { + filterLabelListColor[index] = Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: filterLabelListColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index af40b04..98ed405 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -151,7 +151,8 @@ packages: sha256: "927573f2e8a8d65c17931e21918ad0ab0666b1b636537de7c4932bdb487b190f" url: "https://pub.dev" source: hosted - version: "4.0.3" + + version: "4.0.4" hive: dependency: "direct main" description: @@ -196,10 +197,10 @@ packages: dependency: transitive description: name: lints - sha256: "5e4a9cd06d447758280a8ac2405101e0e2094d2a1dbdd3756aec3fe7775ba593" + sha256: "6b0206b0bf4f04961fc5438198ccb3a885685cd67d4d4a32cc20ad7f8adbe015" url: "https://pub.dev" source: hosted - version: "2.0.1" + version: "2.1.0" matcher: dependency: transitive description: @@ -478,5 +479,5 @@ packages: source: hosted version: "1.0.0" sdks: - dart: ">=2.19.0 <3.0.0" + dart: ">=3.0.0-417 <4.0.0" flutter: ">=3.3.0"