From 25b14b7571864cc77264f67c4487a001c66300de Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Thu, 11 May 2023 16:33:38 +0100 Subject: [PATCH 01/11] first commit --- .../assign_commitments.dart | 47 +++++++++++++++++-- 1 file changed, 44 insertions(+), 3 deletions(-) diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart index 45806a1..60f9faa 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart @@ -5,6 +5,7 @@ import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sectio import 'package:collaction_cms/presentation/shared/buttons/button_outlined.dart'; import 'package:collaction_cms/presentation/shared/buttons/combo_buttons.dart'; import 'package:collaction_cms/presentation/shared/composition/text_composition.dart'; +import 'package:collaction_cms/presentation/shared/form/util/icon_search.dart'; import 'package:collaction_cms/presentation/theme/constants.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -87,9 +88,49 @@ class _AssignCommitmentsState extends State { ? Container( padding: const EdgeInsets.only(top: 105), alignment: Alignment.topCenter, - child: const SelectableText( - "Not yet supported", - style: CollactionTextStyles.body, + child: Padding( + padding: const EdgeInsets.all(19.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Padding( + padding: EdgeInsets.all(10.0), + child: TextField( + decoration: InputDecoration( + prefixIcon: Icon(Icons.search), + suffixIcon: Icon(Icons.add_circle_outline), + hintText: + 'Search commitmets templates tags', + enabledBorder: UnderlineInputBorder( + borderSide: + BorderSide(color: Colors.grey), + ), + focusedBorder: UnderlineInputBorder( + borderSide: + BorderSide(color: Colors.grey), + ), + ), + ), + ), + const Padding( + padding: EdgeInsets.all(10.0), + child: Text("Selected tags:"), + ), + Row( + children: const [ + Chip( + avatar: Icon( + Icons.close, + weight: 10, + ), + label: Text("Text"), + ), + Chip(label: Text("Text")), + Chip(label: Text("Text")), + ], + ), + ], + ), ), ) : Container( From cbf8e86f0c28c6b33891d2376cfd80bd984b18a0 Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Mon, 15 May 2023 17:22:50 +0100 Subject: [PATCH 02/11] commitment template listtile --- .../assign_commitments.dart | 52 +------ .../commitment_template.dart | 143 ++++++++++++++++++ lib/presentation/theme/text.dart | 7 + 3 files changed, 152 insertions(+), 50 deletions(-) create mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart index 60f9faa..29df058 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart @@ -1,12 +1,11 @@ import 'package:collaction_cms/application/crowdaction/crowdaction_creation/commitments/commitments_bloc.dart'; import 'package:collaction_cms/domain/crowdaction/crowdaction.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart'; import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assigned_commitments/commitment_form_controller.dart'; import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assigned_commitments/commitment_item_form.dart'; import 'package:collaction_cms/presentation/shared/buttons/button_outlined.dart'; import 'package:collaction_cms/presentation/shared/buttons/combo_buttons.dart'; import 'package:collaction_cms/presentation/shared/composition/text_composition.dart'; -import 'package:collaction_cms/presentation/shared/form/util/icon_search.dart'; -import 'package:collaction_cms/presentation/theme/constants.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -85,54 +84,7 @@ class _AssignCommitmentsState extends State { color: const Color(0xFFDADADA), )), child: !onOrOffNotifier.value - ? Container( - padding: const EdgeInsets.only(top: 105), - alignment: Alignment.topCenter, - child: Padding( - padding: const EdgeInsets.all(19.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Padding( - padding: EdgeInsets.all(10.0), - child: TextField( - decoration: InputDecoration( - prefixIcon: Icon(Icons.search), - suffixIcon: Icon(Icons.add_circle_outline), - hintText: - 'Search commitmets templates tags', - enabledBorder: UnderlineInputBorder( - borderSide: - BorderSide(color: Colors.grey), - ), - focusedBorder: UnderlineInputBorder( - borderSide: - BorderSide(color: Colors.grey), - ), - ), - ), - ), - const Padding( - padding: EdgeInsets.all(10.0), - child: Text("Selected tags:"), - ), - Row( - children: const [ - Chip( - avatar: Icon( - Icons.close, - weight: 10, - ), - label: Text("Text"), - ), - Chip(label: Text("Text")), - Chip(label: Text("Text")), - ], - ), - ], - ), - ), - ) + ? CommitmentTemplate(fullWidth: fullWidth) : Container( padding: const EdgeInsets.symmetric( vertical: 10, horizontal: 20), diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart new file mode 100644 index 0000000..09be510 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -0,0 +1,143 @@ +import 'package:collaction_cms/presentation/core/icons/collaction_icons.dart'; +import 'package:flutter/material.dart'; + +import '../../../../../../theme/constants.dart'; + +class CommitmentTemplate extends StatefulWidget { + final double fullWidth; + const CommitmentTemplate({super.key, required this.fullWidth}); + + @override + State createState() => _CommitmentTemplateState(); +} + +class _CommitmentTemplateState extends State { + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(18.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Padding( + padding: EdgeInsets.all(10.0), + child: TextField( + decoration: InputDecoration( + prefixIcon: Icon(Icons.search), + suffixIcon: Icon(Icons.add_circle_outline), + hintText: 'Search commitmets templates tags', + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.grey), + ), + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.grey), + ), + ), + ), + ), + const Padding( + padding: EdgeInsets.all(10.0), + child: Text("Selected tags:"), + ), + Row( + children: const [ + Chip( + avatar: Icon( + Icons.close, + weight: 10, + ), + label: Text("Text"), + ), + Chip(label: Text("Text")), + Chip(label: Text("Text")), + ], + ), + const Divider(), + Row( + children: [ + const SelectableText("Commitments"), + const SelectableText("8"), + const Spacer(), + TextButton( + onPressed: () {}, + child: const Text( + "Previous", + style: CollactionTextStyles.body, + )), + const SelectableText("Page 1 of 5"), + TextButton( + onPressed: () {}, + child: const Text( + "Next", + style: CollactionTextStyles.body, + )), + ], + ), + SizedBox( + height: widget.fullWidth - 79, + child: SingleChildScrollView( + child: ListView( + shrinkWrap: true, + children: [ + ExpansionTile( + iconColor: kBlackPrimary300, + title: Row( + children: [ + const Padding( + padding: EdgeInsets.only(right: 10.0), + child: Icon( + CollactionIcons.vegan, + color: kAccentColor, + ), + ), + const Text( + "5 days per week", + style: CollactionTextStyles.body, + ), + const Spacer(), + OutlinedButton( + onPressed: () {}, + style: ButtonStyle( + side: MaterialStateProperty.all(const BorderSide( + color: kAccentColor, + )), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(30.0))), + ), + child: const Text( + "Add", + style: CollactionTextStyles.addButton, + )) + ], + ), + children: [ + ListTile( + title: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: const [ + Divider(), + Text( + "Tags: [Diet, Days, Veganuary ]", + style: CollactionTextStyles.bodyBold, + ), + Text( + "Description: Commit to eating a vegan diet 4 day per week", + style: CollactionTextStyles.body), + Text("Points: 20", + style: CollactionTextStyles.body), + ], + ), + ) + ], + ), + ], + ), + ), + ) + ], + ), + ); + } +} diff --git a/lib/presentation/theme/text.dart b/lib/presentation/theme/text.dart index 646b634..8b40a43 100644 --- a/lib/presentation/theme/text.dart +++ b/lib/presentation/theme/text.dart @@ -61,6 +61,13 @@ class CollactionTextStyles { color: kBlackPrimary300, ); + ///Figma - Add Button Commitment Template #1 + static const addButton = TextStyle( + fontFamily: "Rubik", + fontSize: 12, + color: kAccentColor, + ); + ///Figma - Body static const body = TextStyle( fontFamily: "Rubik", From b0a0a945d22dd3ed999be7e7c29e45fe3d7803e2 Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Thu, 18 May 2023 17:22:56 +0100 Subject: [PATCH 03/11] commitment template ui fix --- .../commitment_template.dart | 76 ++++----------- .../commitment_template_expandablecard.dart | 94 +++++++++++++++++++ 2 files changed, 113 insertions(+), 57 deletions(-) create mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart index 09be510..29dbe05 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -1,4 +1,5 @@ import 'package:collaction_cms/presentation/core/icons/collaction_icons.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart'; import 'package:flutter/material.dart'; import '../../../../../../theme/constants.dart'; @@ -54,9 +55,24 @@ class _CommitmentTemplateState extends State { ), const Divider(), Row( + crossAxisAlignment: CrossAxisAlignment.center, children: [ - const SelectableText("Commitments"), - const SelectableText("8"), + const SelectableText( + "Commitments", + style: CollactionTextStyles.captionStyleBold, + ), + Container( + margin: const EdgeInsets.only(left: 13), + alignment: Alignment.center, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(30), + ), + child: const SelectableText( + "8", + style: CollactionTextStyles.captionStyle, + ), + ), const Spacer(), TextButton( onPressed: () {}, @@ -78,61 +94,7 @@ class _CommitmentTemplateState extends State { child: SingleChildScrollView( child: ListView( shrinkWrap: true, - children: [ - ExpansionTile( - iconColor: kBlackPrimary300, - title: Row( - children: [ - const Padding( - padding: EdgeInsets.only(right: 10.0), - child: Icon( - CollactionIcons.vegan, - color: kAccentColor, - ), - ), - const Text( - "5 days per week", - style: CollactionTextStyles.body, - ), - const Spacer(), - OutlinedButton( - onPressed: () {}, - style: ButtonStyle( - side: MaterialStateProperty.all(const BorderSide( - color: kAccentColor, - )), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: - BorderRadius.circular(30.0))), - ), - child: const Text( - "Add", - style: CollactionTextStyles.addButton, - )) - ], - ), - children: [ - ListTile( - title: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: const [ - Divider(), - Text( - "Tags: [Diet, Days, Veganuary ]", - style: CollactionTextStyles.bodyBold, - ), - Text( - "Description: Commit to eating a vegan diet 4 day per week", - style: CollactionTextStyles.body), - Text("Points: 20", - style: CollactionTextStyles.body), - ], - ), - ) - ], - ), - ], + children: const [ExpandableTemplateCard()], ), ), ) diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart new file mode 100644 index 0000000..d644681 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart @@ -0,0 +1,94 @@ +import 'package:flutter/material.dart'; + +import '../../../../../../../core/icons/collaction_icons.dart'; +import '../../../../../../../theme/constants.dart'; + +class ExpandableTemplateCard extends StatefulWidget { + const ExpandableTemplateCard({super.key}); + + @override + State createState() => _ExpandableTemplateCardState(); +} + +class _ExpandableTemplateCardState extends State { + @override + Widget build(BuildContext context) { + return ExpansionTile( + iconColor: kBlackPrimary300, + title: Row( + children: [ + const Padding( + padding: EdgeInsets.only(right: 10.0), + child: Icon( + CollactionIcons.vegan, + color: kAccentColor, + ), + ), + const SelectableText( + "5 days per week", + style: CollactionTextStyles.bodyLabelRegular, + ), + const Spacer(), + OutlinedButton( + onPressed: () {}, + style: ButtonStyle( + side: MaterialStateProperty.all(const BorderSide( + color: kAccentColor, + )), + shape: MaterialStateProperty.all(RoundedRectangleBorder( + borderRadius: BorderRadius.circular(30.0))), + ), + child: const Text( + "Add", + style: CollactionTextStyles.addButton, + )) + ], + ), + children: [ + ListTile( + title: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Divider(), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: const [ + SelectableText.rich(TextSpan( + text: "Tags: ", + style: CollactionTextStyles.bodyMedium14, + children: [ + TextSpan( + text: "[Diet, Days, Veganuary ]", + style: CollactionTextStyles.body14, + ) + ])), + SizedBox(height: 5), + SelectableText.rich(TextSpan( + text: "Description: ", + style: CollactionTextStyles.bodyMedium14, + children: [ + TextSpan( + text: "Commit to eating a vegan diet 4 day per week", + style: CollactionTextStyles.body14, + ) + ])), + SizedBox(height: 5), + SelectableText.rich(TextSpan( + text: "Points: ", + style: CollactionTextStyles.bodyMedium14, + children: [ + TextSpan( + text: "20", + style: CollactionTextStyles.body14, + ) + ])), + SizedBox(height: 5), + ], + ) + ], + ), + ) + ], + ); + } +} From 7e6755b4a046a9e8604b369e0865f3ac0342f19d Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Thu, 25 May 2023 17:21:44 +0100 Subject: [PATCH 04/11] refactor: expandableTemplateCard --- .../commitment_template.dart | 77 +++++--- .../commitment_template_expandablecard.dart | 173 +++++++++++------- .../previousNextButton.dart | 30 +++ pubspec.lock | 2 +- 4 files changed, 181 insertions(+), 101 deletions(-) create mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart index 29dbe05..dde96df 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -1,8 +1,10 @@ import 'package:collaction_cms/presentation/core/icons/collaction_icons.dart'; import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart'; +import 'package:collaction_cms/presentation/shared/extra/tags_pills.dart'; import 'package:flutter/material.dart'; import '../../../../../../theme/constants.dart'; +import 'commitment_template_widgets/previousNextButton.dart'; class CommitmentTemplate extends StatefulWidget { final double fullWidth; @@ -27,6 +29,7 @@ class _CommitmentTemplateState extends State { prefixIcon: Icon(Icons.search), suffixIcon: Icon(Icons.add_circle_outline), hintText: 'Search commitmets templates tags', + hintStyle: CollactionTextStyles.captionStyleLight, enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.grey), ), @@ -38,19 +41,25 @@ class _CommitmentTemplateState extends State { ), const Padding( padding: EdgeInsets.all(10.0), - child: Text("Selected tags:"), + child: Text( + "Selected tags:", + style: CollactionTextStyles.captionStyleLight, + ), ), Row( - children: const [ - Chip( - avatar: Icon( - Icons.close, - weight: 10, - ), - label: Text("Text"), + children: [ + Padding( + padding: const EdgeInsets.only(left: 5, right: 5), + child: TagPill(value: "Days", callback: () {}), + ), + Padding( + padding: const EdgeInsets.only(left: 5, right: 5), + child: TagPill(value: "Veganuary", callback: () {}), + ), + Padding( + padding: const EdgeInsets.only(left: 5, right: 5), + child: TagPill(value: "Diet", callback: () {}), ), - Chip(label: Text("Text")), - Chip(label: Text("Text")), ], ), const Divider(), @@ -74,27 +83,37 @@ class _CommitmentTemplateState extends State { ), ), const Spacer(), - TextButton( - onPressed: () {}, - child: const Text( - "Previous", - style: CollactionTextStyles.body, - )), - const SelectableText("Page 1 of 5"), - TextButton( - onPressed: () {}, - child: const Text( - "Next", - style: CollactionTextStyles.body, - )), + PreviousNextbutton( + buttonText: 'Previous', + buttonAction: () {}, + ), + const SelectableText( + "Page 1 of 5", + style: CollactionTextStyles.captionStyleLight, + ), + PreviousNextbutton( + buttonText: 'Next', + buttonAction: () {}, + ), ], ), - SizedBox( - height: widget.fullWidth - 79, - child: SingleChildScrollView( - child: ListView( - shrinkWrap: true, - children: const [ExpandableTemplateCard()], + Padding( + padding: const EdgeInsets.only( + top: 16, + ), + child: SizedBox( + height: widget.fullWidth - 100, + child: SingleChildScrollView( + child: ListView( + shrinkWrap: true, + children: const [ + ExpandableTemplateCard(), + ExpandableTemplateCard(), + ExpandableTemplateCard(), + ExpandableTemplateCard(), + ExpandableTemplateCard(), + ], + ), ), ), ) diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart index d644681..b618b7a 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart @@ -13,82 +13,113 @@ class ExpandableTemplateCard extends StatefulWidget { class _ExpandableTemplateCardState extends State { @override Widget build(BuildContext context) { - return ExpansionTile( - iconColor: kBlackPrimary300, - title: Row( - children: [ - const Padding( - padding: EdgeInsets.only(right: 10.0), - child: Icon( - CollactionIcons.vegan, - color: kAccentColor, - ), + return Padding( + padding: const EdgeInsets.only( + top: 5, + bottom: 5, + ), + child: ExpansionTile( + backgroundColor: kScaffoldColorWhite, + collapsedBackgroundColor: kScaffoldColorWhite, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10.0), + side: const BorderSide( + color: kBlackPrimary100, ), - const SelectableText( - "5 days per week", - style: CollactionTextStyles.bodyLabelRegular, + ), + collapsedShape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10.0), + side: const BorderSide( + color: kBlackPrimary100, ), - const Spacer(), - OutlinedButton( - onPressed: () {}, - style: ButtonStyle( - side: MaterialStateProperty.all(const BorderSide( - color: kAccentColor, - )), - shape: MaterialStateProperty.all(RoundedRectangleBorder( - borderRadius: BorderRadius.circular(30.0))), + ), + iconColor: kBlackPrimary300, + title: Row( + children: [ + Padding( + padding: const EdgeInsets.only(right: 10.0), + child: Container( + alignment: Alignment.center, + decoration: BoxDecoration( + color: kBlackPrimary0, + borderRadius: BorderRadius.circular(30), + ), + child: const Padding( + padding: EdgeInsets.all(8.0), + child: Icon( + CollactionIcons.vegan, + color: kAccentColor, + ), + ), ), - child: const Text( - "Add", - style: CollactionTextStyles.addButton, - )) + ), + const SelectableText( + "5 days per week", + style: CollactionTextStyles.bodyLabelRegular, + ), + const Spacer(), + OutlinedButton( + onPressed: () {}, + style: ButtonStyle( + side: MaterialStateProperty.all(const BorderSide( + color: kAccentColor, + )), + shape: MaterialStateProperty.all(RoundedRectangleBorder( + borderRadius: BorderRadius.circular(30.0))), + ), + child: const Text( + "Add", + style: CollactionTextStyles.addButton, + )) + ], + ), + children: [ + ListTile( + title: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Divider(), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: const [ + SelectableText.rich(TextSpan( + text: "Tags: ", + style: CollactionTextStyles.bodyMedium14, + children: [ + TextSpan( + text: "[Diet, Days, Veganuary ]", + style: CollactionTextStyles.body14, + ) + ])), + SizedBox(height: 5), + SelectableText.rich(TextSpan( + text: "Description: ", + style: CollactionTextStyles.bodyMedium14, + children: [ + TextSpan( + text: + "Commit to eating a vegan diet 4 day per week", + style: CollactionTextStyles.body14, + ) + ])), + SizedBox(height: 5), + SelectableText.rich(TextSpan( + text: "Points: ", + style: CollactionTextStyles.bodyMedium14, + children: [ + TextSpan( + text: "20", + style: CollactionTextStyles.body14, + ) + ])), + SizedBox(height: 5), + ], + ) + ], + ), + ) ], ), - children: [ - ListTile( - title: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Divider(), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: const [ - SelectableText.rich(TextSpan( - text: "Tags: ", - style: CollactionTextStyles.bodyMedium14, - children: [ - TextSpan( - text: "[Diet, Days, Veganuary ]", - style: CollactionTextStyles.body14, - ) - ])), - SizedBox(height: 5), - SelectableText.rich(TextSpan( - text: "Description: ", - style: CollactionTextStyles.bodyMedium14, - children: [ - TextSpan( - text: "Commit to eating a vegan diet 4 day per week", - style: CollactionTextStyles.body14, - ) - ])), - SizedBox(height: 5), - SelectableText.rich(TextSpan( - text: "Points: ", - style: CollactionTextStyles.bodyMedium14, - children: [ - TextSpan( - text: "20", - style: CollactionTextStyles.body14, - ) - ])), - SizedBox(height: 5), - ], - ) - ], - ), - ) - ], ); } } diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart new file mode 100644 index 0000000..2cedf7a --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; + +import '../../../../../../../theme/constants.dart'; + +class PreviousNextbutton extends StatelessWidget { + final String buttonText; + final VoidCallback buttonAction; + const PreviousNextbutton( + {super.key, required this.buttonText, required this.buttonAction}); + + @override + Widget build(BuildContext context) { + return Container( + margin: const EdgeInsets.only(left: 5, right: 5), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(30), + border: Border.all( + color: kBlackPrimary200, + ), + ), + child: TextButton( + onPressed: buttonAction, + child: Text( + buttonText, + style: CollactionTextStyles.captionStyleLight, + )), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 313136a..fd203d4 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -1079,5 +1079,5 @@ packages: source: hosted version: "3.1.1" sdks: - dart: ">=2.18.0 <3.0.0" + dart: ">=2.18.0 <4.0.0" flutter: ">=3.3.0" From d8eee9488c8159c4e0106d494c0ec14c34b556e8 Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Fri, 2 Jun 2023 18:03:20 +0100 Subject: [PATCH 05/11] refactor: add dummy data --- .../commitment_template.dart | 82 +++++++++---------- 1 file changed, 40 insertions(+), 42 deletions(-) diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart index dde96df..8784cc3 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -1,9 +1,10 @@ -import 'package:collaction_cms/presentation/core/icons/collaction_icons.dart'; -import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart'; + import 'package:collaction_cms/presentation/shared/extra/tags_pills.dart'; import 'package:flutter/material.dart'; import '../../../../../../theme/constants.dart'; +import 'commitment_template_widgets/expandable_card_list.dart'; import 'commitment_template_widgets/previousNextButton.dart'; class CommitmentTemplate extends StatefulWidget { @@ -15,17 +16,20 @@ class CommitmentTemplate extends StatefulWidget { } class _CommitmentTemplateState extends State { + List tags = []; @override Widget build(BuildContext context) { + List itemList = dummyData; + return Padding( padding: const EdgeInsets.all(18.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Padding( - padding: EdgeInsets.all(10.0), + Padding( + padding: const EdgeInsets.all(10.0), child: TextField( - decoration: InputDecoration( + decoration: const InputDecoration( prefixIcon: Icon(Icons.search), suffixIcon: Icon(Icons.add_circle_outline), hintText: 'Search commitmets templates tags', @@ -37,6 +41,11 @@ class _CommitmentTemplateState extends State { borderSide: BorderSide(color: Colors.grey), ), ), + onSubmitted: (value) { + setState(() { + tags.add(value); + }); + }, ), ), const Padding( @@ -46,22 +55,7 @@ class _CommitmentTemplateState extends State { style: CollactionTextStyles.captionStyleLight, ), ), - Row( - children: [ - Padding( - padding: const EdgeInsets.only(left: 5, right: 5), - child: TagPill(value: "Days", callback: () {}), - ), - Padding( - padding: const EdgeInsets.only(left: 5, right: 5), - child: TagPill(value: "Veganuary", callback: () {}), - ), - Padding( - padding: const EdgeInsets.only(left: 5, right: 5), - child: TagPill(value: "Diet", callback: () {}), - ), - ], - ), + buildTagsRow(tags), const Divider(), Row( crossAxisAlignment: CrossAxisAlignment.center, @@ -77,8 +71,8 @@ class _CommitmentTemplateState extends State { color: Colors.white, borderRadius: BorderRadius.circular(30), ), - child: const SelectableText( - "8", + child: SelectableText( + dummyData.length.toString(), style: CollactionTextStyles.captionStyle, ), ), @@ -97,28 +91,32 @@ class _CommitmentTemplateState extends State { ), ], ), - Padding( - padding: const EdgeInsets.only( - top: 16, - ), - child: SizedBox( - height: widget.fullWidth - 100, - child: SingleChildScrollView( - child: ListView( - shrinkWrap: true, - children: const [ - ExpandableTemplateCard(), - ExpandableTemplateCard(), - ExpandableTemplateCard(), - ExpandableTemplateCard(), - ExpandableTemplateCard(), - ], - ), - ), - ), + ExpandableCardList( + itemList: itemList, + height: widget.fullWidth - 100, ) ], ), ); } + + Widget buildTagsRow(List tags) { + List rowItems = []; + for (var i = 0; i < tags.length; i++) { + Widget rowItem = Padding( + padding: const EdgeInsets.only(left: 5, right: 5), + child: TagPill( + value: tags[i], + callback: () { + setState(() { + tags.removeAt(i); + }); + }), + ); + rowItems.add(rowItem); + } + return Row( + children: rowItems, + ); + } } From 7c96c940f85df904cdee9610059d89d2ffc9c93a Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Fri, 2 Jun 2023 18:03:48 +0100 Subject: [PATCH 06/11] refactor: tag list --- .../commitment_template_expandablecard.dart | 59 ++++++++++--------- .../custom_search_delegate.dart | 53 +++++++++++++++++ .../dummy_data.dart | 46 +++++++++++++++ .../expandable_card_list.dart | 37 ++++++++++++ .../previousNextButton.dart | 1 + 5 files changed, 167 insertions(+), 29 deletions(-) create mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/custom_search_delegate.dart create mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart create mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart index b618b7a..f145f6d 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart @@ -1,10 +1,21 @@ +import 'package:collaction_cms/presentation/shared/buttons/button_outlined.dart'; import 'package:flutter/material.dart'; - -import '../../../../../../../core/icons/collaction_icons.dart'; import '../../../../../../../theme/constants.dart'; class ExpandableTemplateCard extends StatefulWidget { - const ExpandableTemplateCard({super.key}); + final String label; + final IconData icons; + final List tags; + final String description; + final String points; + + const ExpandableTemplateCard( + {super.key, + required this.label, + required this.icons, + required this.tags, + required this.description, + required this.points}); @override State createState() => _ExpandableTemplateCardState(); @@ -44,33 +55,24 @@ class _ExpandableTemplateCardState extends State { color: kBlackPrimary0, borderRadius: BorderRadius.circular(30), ), - child: const Padding( - padding: EdgeInsets.all(8.0), + child: Padding( + padding: const EdgeInsets.all(8.0), child: Icon( - CollactionIcons.vegan, + widget.icons, color: kAccentColor, ), ), ), ), - const SelectableText( - "5 days per week", + SelectableText( + widget.label, style: CollactionTextStyles.bodyLabelRegular, ), const Spacer(), - OutlinedButton( - onPressed: () {}, - style: ButtonStyle( - side: MaterialStateProperty.all(const BorderSide( - color: kAccentColor, - )), - shape: MaterialStateProperty.all(RoundedRectangleBorder( - borderRadius: BorderRadius.circular(30.0))), - ), - child: const Text( - "Add", - style: CollactionTextStyles.addButton, - )) + const SmallOutlinedButton( + smallOutlinedButtonType: SmallOutlinedButtonType.add, + callback: null, + ) ], ), children: [ @@ -81,38 +83,37 @@ class _ExpandableTemplateCardState extends State { const Divider(), Column( crossAxisAlignment: CrossAxisAlignment.start, - children: const [ + children: [ SelectableText.rich(TextSpan( text: "Tags: ", style: CollactionTextStyles.bodyMedium14, children: [ TextSpan( - text: "[Diet, Days, Veganuary ]", + text: widget.tags.toString(), style: CollactionTextStyles.body14, ) ])), - SizedBox(height: 5), + const SizedBox(height: 5), SelectableText.rich(TextSpan( text: "Description: ", style: CollactionTextStyles.bodyMedium14, children: [ TextSpan( - text: - "Commit to eating a vegan diet 4 day per week", + text: widget.description, style: CollactionTextStyles.body14, ) ])), - SizedBox(height: 5), + const SizedBox(height: 5), SelectableText.rich(TextSpan( text: "Points: ", style: CollactionTextStyles.bodyMedium14, children: [ TextSpan( - text: "20", + text: widget.points, style: CollactionTextStyles.body14, ) ])), - SizedBox(height: 5), + const SizedBox(height: 5), ], ) ], diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/custom_search_delegate.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/custom_search_delegate.dart new file mode 100644 index 0000000..0bb7893 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/custom_search_delegate.dart @@ -0,0 +1,53 @@ +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart'; +import 'package:flutter/material.dart'; + +class CustomSearchDelegate extends SearchDelegate { + List itemList = dummyData; + @override + List? buildActions(BuildContext context) { + // TODO: implement buildActions + throw UnimplementedError(); + } + + @override + Widget? buildLeading(BuildContext context) { + // TODO: implement buildLeading + throw UnimplementedError(); + } + + @override + Widget buildResults(BuildContext context) { + List matchQuery = []; + for (var tag in itemList) { + if (tag.tags.toString().toLowerCase().contains(query.toLowerCase())) { + matchQuery.add(tag.tags.toString()); + } + } + return ListView.builder( + itemCount: matchQuery.length, + itemBuilder: (context, index) { + var result = matchQuery[index]; + return ListTile( + title: Text(result), + ); + }); + } + + @override + Widget buildSuggestions(BuildContext context) { + List matchQuery = []; + for (var tag in itemList) { + if (tag.tags.toString().toLowerCase().contains(query.toLowerCase())) { + matchQuery.add(tag.tags.toString()); + } + } + return ListView.builder( + itemCount: matchQuery.length, + itemBuilder: (context, index) { + var result = matchQuery[index]; + return ListTile( + title: Text(result), + ); + }); + } +} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart new file mode 100644 index 0000000..903b2bf --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart @@ -0,0 +1,46 @@ +import 'package:collaction_cms/presentation/core/icons/collaction_icons.dart'; +import 'package:flutter/material.dart'; + +class DummyModel { + final String label; + final List tags; + final String description; + final String points; + final IconData commitmentIcon; + + DummyModel(this.label, this.tags, this.description, this.points, + this.commitmentIcon); +} + +List dummyData = [ + DummyModel( + "1 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "10", + CollactionIcons.vegan), + DummyModel( + "2 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "20", + CollactionIcons.vegan), + DummyModel( + "3 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "30", + CollactionIcons.vegan), + DummyModel( + "4 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "40", + CollactionIcons.vegan), + DummyModel( + "5 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "50", + CollactionIcons.vegan), +]; diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart new file mode 100644 index 0000000..e714db5 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart @@ -0,0 +1,37 @@ +import 'package:flutter/material.dart'; + +import 'commitment_template_expandablecard.dart'; + +class ExpandableCardList extends StatelessWidget { + final double height; + final List itemList; + + const ExpandableCardList( + {super.key, required this.height, required this.itemList}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only( + top: 16, + ), + child: SizedBox( + height: height, + child: SingleChildScrollView( + child: ListView.builder( + itemCount: itemList.length, + shrinkWrap: true, + itemBuilder: (BuildContext context, int index) { + return ExpandableTemplateCard( + label: itemList[index].label, + icons: itemList[index].commitmentIcon, + tags: itemList[index].tags, + description: itemList[index].description, + points: itemList[index].points); + }, + ), + ), + ), + ); + } +} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart index 2cedf7a..ffed5a7 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart @@ -11,6 +11,7 @@ class PreviousNextbutton extends StatelessWidget { @override Widget build(BuildContext context) { return Container( + height: 20, margin: const EdgeInsets.only(left: 5, right: 5), alignment: Alignment.center, decoration: BoxDecoration( From 9086ff639227313b6756fb366b304d083f7c7d73 Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Sun, 4 Jun 2023 19:47:42 +0100 Subject: [PATCH 07/11] add: buildPages for expandableCardList --- .../commitment_template.dart | 53 +++++++++++++++---- 1 file changed, 44 insertions(+), 9 deletions(-) diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart index 8784cc3..774636e 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -1,6 +1,7 @@ import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart'; import 'package:collaction_cms/presentation/shared/extra/tags_pills.dart'; +import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; import '../../../../../../theme/constants.dart'; @@ -17,10 +18,20 @@ class CommitmentTemplate extends StatefulWidget { class _CommitmentTemplateState extends State { List tags = []; + final PageController controller = PageController(); + int _currentPage = 0; + List pages = []; + static const _kDuration = Duration(milliseconds: 300); + static const _kCurve = Curves.ease; + @override + void dispose() { + controller.dispose(); + super.dispose(); + } + @override Widget build(BuildContext context) { List itemList = dummyData; - return Padding( padding: const EdgeInsets.all(18.0), child: Column( @@ -31,7 +42,9 @@ class _CommitmentTemplateState extends State { child: TextField( decoration: const InputDecoration( prefixIcon: Icon(Icons.search), + prefixIconColor: Colors.grey, suffixIcon: Icon(Icons.add_circle_outline), + suffixIconColor: Colors.grey, hintText: 'Search commitmets templates tags', hintStyle: CollactionTextStyles.captionStyleLight, enabledBorder: UnderlineInputBorder( @@ -79,22 +92,21 @@ class _CommitmentTemplateState extends State { const Spacer(), PreviousNextbutton( buttonText: 'Previous', - buttonAction: () {}, + buttonAction: () => controller.previousPage( + duration: _kDuration, curve: _kCurve), ), - const SelectableText( - "Page 1 of 5", + SelectableText( + "Page $_currentPage of ${pages.length.toString()}", style: CollactionTextStyles.captionStyleLight, ), PreviousNextbutton( buttonText: 'Next', - buttonAction: () {}, + buttonAction: () => + controller.nextPage(duration: _kDuration, curve: _kCurve), ), ], ), - ExpandableCardList( - itemList: itemList, - height: widget.fullWidth - 100, - ) + SizedBox(height: widget.fullWidth - 100, child: buildPages(itemList)), ], ), ); @@ -119,4 +131,27 @@ class _CommitmentTemplateState extends State { children: rowItems, ); } + + Widget buildPages(List itemsList) { + List itemLists = itemsList.slices(4).toList(); + for (var i = 0; i < itemLists.length; i++) { + ExpandableCardList item = ExpandableCardList( + itemList: itemLists[i], + height: widget.fullWidth - 100, + ); + setState(() { + pages.add(item); + }); + } + return PageView.builder( + controller: controller, + itemCount: pages.length, + itemBuilder: (BuildContext context, int index) { + return pages[index % pages.length]; + }, + onPageChanged: (page) => setState(() { + _currentPage = page; + }), + ); + } } From 6f25f4643d1264ab06188d037a41414955f81e45 Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Mon, 5 Jun 2023 17:38:05 +0100 Subject: [PATCH 08/11] ready to PR --- .../commitment_template.dart | 146 +----------------- .../commitment_list_pages.dart | 102 ++++++++++++ .../custom_search_delegate.dart | 53 ------- .../tag_search.dart | 75 +++++++++ 4 files changed, 184 insertions(+), 192 deletions(-) create mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart delete mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/custom_search_delegate.dart create mode 100644 lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart index 774636e..f29f278 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -1,13 +1,7 @@ -import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart'; - -import 'package:collaction_cms/presentation/shared/extra/tags_pills.dart'; -import 'package:collection/collection.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart'; import 'package:flutter/material.dart'; -import '../../../../../../theme/constants.dart'; -import 'commitment_template_widgets/expandable_card_list.dart'; -import 'commitment_template_widgets/previousNextButton.dart'; - class CommitmentTemplate extends StatefulWidget { final double fullWidth; const CommitmentTemplate({super.key, required this.fullWidth}); @@ -17,141 +11,15 @@ class CommitmentTemplate extends StatefulWidget { } class _CommitmentTemplateState extends State { - List tags = []; - final PageController controller = PageController(); - int _currentPage = 0; - List pages = []; - static const _kDuration = Duration(milliseconds: 300); - static const _kCurve = Curves.ease; - @override - void dispose() { - controller.dispose(); - super.dispose(); - } - @override Widget build(BuildContext context) { - List itemList = dummyData; return Padding( padding: const EdgeInsets.all(18.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Padding( - padding: const EdgeInsets.all(10.0), - child: TextField( - decoration: const InputDecoration( - prefixIcon: Icon(Icons.search), - prefixIconColor: Colors.grey, - suffixIcon: Icon(Icons.add_circle_outline), - suffixIconColor: Colors.grey, - hintText: 'Search commitmets templates tags', - hintStyle: CollactionTextStyles.captionStyleLight, - enabledBorder: UnderlineInputBorder( - borderSide: BorderSide(color: Colors.grey), - ), - focusedBorder: UnderlineInputBorder( - borderSide: BorderSide(color: Colors.grey), - ), - ), - onSubmitted: (value) { - setState(() { - tags.add(value); - }); - }, - ), - ), - const Padding( - padding: EdgeInsets.all(10.0), - child: Text( - "Selected tags:", - style: CollactionTextStyles.captionStyleLight, - ), - ), - buildTagsRow(tags), - const Divider(), - Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - const SelectableText( - "Commitments", - style: CollactionTextStyles.captionStyleBold, - ), - Container( - margin: const EdgeInsets.only(left: 13), - alignment: Alignment.center, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(30), - ), - child: SelectableText( - dummyData.length.toString(), - style: CollactionTextStyles.captionStyle, - ), - ), - const Spacer(), - PreviousNextbutton( - buttonText: 'Previous', - buttonAction: () => controller.previousPage( - duration: _kDuration, curve: _kCurve), - ), - SelectableText( - "Page $_currentPage of ${pages.length.toString()}", - style: CollactionTextStyles.captionStyleLight, - ), - PreviousNextbutton( - buttonText: 'Next', - buttonAction: () => - controller.nextPage(duration: _kDuration, curve: _kCurve), - ), - ], - ), - SizedBox(height: widget.fullWidth - 100, child: buildPages(itemList)), - ], - ), - ); - } - - Widget buildTagsRow(List tags) { - List rowItems = []; - for (var i = 0; i < tags.length; i++) { - Widget rowItem = Padding( - padding: const EdgeInsets.only(left: 5, right: 5), - child: TagPill( - value: tags[i], - callback: () { - setState(() { - tags.removeAt(i); - }); - }), - ); - rowItems.add(rowItem); - } - return Row( - children: rowItems, - ); - } - - Widget buildPages(List itemsList) { - List itemLists = itemsList.slices(4).toList(); - for (var i = 0; i < itemLists.length; i++) { - ExpandableCardList item = ExpandableCardList( - itemList: itemLists[i], - height: widget.fullWidth - 100, - ); - setState(() { - pages.add(item); - }); - } - return PageView.builder( - controller: controller, - itemCount: pages.length, - itemBuilder: (BuildContext context, int index) { - return pages[index % pages.length]; - }, - onPageChanged: (page) => setState(() { - _currentPage = page; - }), + child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + const TagSearchSection(), + const Divider(), + CommitmentListPages(fullWidth: widget.fullWidth), + ]), ); } } diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart new file mode 100644 index 0000000..47a0816 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart @@ -0,0 +1,102 @@ +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart'; +import 'package:collection/collection.dart'; +import 'package:flutter/material.dart'; + +import '../../../../../../../theme/constants.dart'; + +class CommitmentListPages extends StatefulWidget { + final double fullWidth; + const CommitmentListPages({super.key, required this.fullWidth}); + + @override + State createState() => _CommitmentListPagesState(); +} + +class _CommitmentListPagesState extends State { + final PageController controller = PageController(); + int _currentPage = 0; + List pages = []; + static const _kDuration = Duration(milliseconds: 300); + static const _kCurve = Curves.ease; + + @override + void dispose() { + controller.dispose(); + super.dispose(); + } + + @override + void initState() { + buildPages(dummyData); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + const SelectableText( + "Commitments", + style: CollactionTextStyles.captionStyleBold, + ), + Container( + margin: const EdgeInsets.only(left: 13), + alignment: Alignment.center, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(30), + ), + child: SelectableText( + dummyData.length.toString(), + style: CollactionTextStyles.captionStyle, + ), + ), + const Spacer(), + PreviousNextbutton( + buttonText: 'Previous', + buttonAction: () => + controller.previousPage(duration: _kDuration, curve: _kCurve), + ), + SelectableText( + "Page ${_currentPage + 1} of ${pages.length.toString()}", + style: CollactionTextStyles.captionStyleLight, + ), + PreviousNextbutton( + buttonText: 'Next', + buttonAction: () => + controller.nextPage(duration: _kDuration, curve: _kCurve), + ), + ], + ), + SizedBox(height: widget.fullWidth - 100, child: buildPages(dummyData)), + ], + ); + } + + Widget buildPages(List itemsList) { + pages.clear(); + List itemLists = itemsList.slices(4).toList(); + for (var i = 0; i < itemLists.length; i++) { + ExpandableCardList item = ExpandableCardList( + itemList: itemLists[i], + height: widget.fullWidth - 100, + ); + pages.add(item); + } + return PageView.builder( + controller: controller, + itemCount: pages.length, + itemBuilder: (BuildContext context, int index) { + return pages[index % pages.length]; + }, + onPageChanged: (page) => setState(() { + _currentPage = page; + }), + ); + } +} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/custom_search_delegate.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/custom_search_delegate.dart deleted file mode 100644 index 0bb7893..0000000 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/custom_search_delegate.dart +++ /dev/null @@ -1,53 +0,0 @@ -import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart'; -import 'package:flutter/material.dart'; - -class CustomSearchDelegate extends SearchDelegate { - List itemList = dummyData; - @override - List? buildActions(BuildContext context) { - // TODO: implement buildActions - throw UnimplementedError(); - } - - @override - Widget? buildLeading(BuildContext context) { - // TODO: implement buildLeading - throw UnimplementedError(); - } - - @override - Widget buildResults(BuildContext context) { - List matchQuery = []; - for (var tag in itemList) { - if (tag.tags.toString().toLowerCase().contains(query.toLowerCase())) { - matchQuery.add(tag.tags.toString()); - } - } - return ListView.builder( - itemCount: matchQuery.length, - itemBuilder: (context, index) { - var result = matchQuery[index]; - return ListTile( - title: Text(result), - ); - }); - } - - @override - Widget buildSuggestions(BuildContext context) { - List matchQuery = []; - for (var tag in itemList) { - if (tag.tags.toString().toLowerCase().contains(query.toLowerCase())) { - matchQuery.add(tag.tags.toString()); - } - } - return ListView.builder( - itemCount: matchQuery.length, - itemBuilder: (context, index) { - var result = matchQuery[index]; - return ListTile( - title: Text(result), - ); - }); - } -} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart new file mode 100644 index 0000000..86ad8b9 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart @@ -0,0 +1,75 @@ +import 'package:flutter/material.dart'; + +import '../../../../../../../shared/extra/tags_pills.dart'; +import '../../../../../../../theme/constants.dart'; + +class TagSearchSection extends StatefulWidget { + const TagSearchSection({super.key}); + + @override + State createState() => _TagSearchSectionState(); +} + +class _TagSearchSectionState extends State { + List tags = ["Days", "Veganuary", "Diet"]; + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.all(10.0), + child: TextField( + decoration: const InputDecoration( + prefixIcon: Icon(Icons.search), + prefixIconColor: Colors.grey, + suffixIcon: Icon(Icons.add_circle_outline), + suffixIconColor: Colors.grey, + hintText: 'Search commitmets templates tags', + hintStyle: CollactionTextStyles.captionStyleLight, + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.grey), + ), + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.grey), + ), + ), + onSubmitted: (seachedTag) { + setState(() { + tags.add(seachedTag); + }); + }, + ), + ), + const Padding( + padding: EdgeInsets.all(10.0), + child: Text( + "Selected tags:", + style: CollactionTextStyles.captionStyleLight, + ), + ), + buildTagsRow(tags), + ], + ); + } + + Widget buildTagsRow(List tags) { + List rowItems = []; + for (var i = 0; i < tags.length; i++) { + Widget rowItem = Padding( + padding: const EdgeInsets.only(left: 5, right: 5), + child: TagPill( + value: tags[i], + callback: () { + setState(() { + tags.removeAt(i); + }); + }), + ); + rowItems.add(rowItem); + } + return Row( + children: rowItems, + ); + } +} From 8eba2fe4081770dd81195c0e950c63cca9fd1ddb Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Fri, 30 Jun 2023 13:53:44 +0100 Subject: [PATCH 09/11] fix: aesthetic changes --- .../commitment_template.dart | 5 +- .../commitment_list_pages.dart | 66 +++++++++---------- .../commitment_template_expandablecard.dart | 6 +- .../previousNextButton.dart | 6 +- .../tag_search.dart | 7 +- .../shared/extra/list_counter.dart | 33 ++++++---- 6 files changed, 70 insertions(+), 53 deletions(-) diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart index f29f278..3162d89 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -1,5 +1,6 @@ import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart'; import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart'; +import 'package:collaction_cms/presentation/theme/constants.dart'; import 'package:flutter/material.dart'; class CommitmentTemplate extends StatefulWidget { @@ -17,7 +18,9 @@ class _CommitmentTemplateState extends State { padding: const EdgeInsets.all(18.0), child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ const TagSearchSection(), - const Divider(), + const Divider( + color: kBlackPrimary200, + ), CommitmentListPages(fullWidth: widget.fullWidth), ]), ); diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart index 47a0816..8fac14e 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart @@ -1,6 +1,7 @@ import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart'; import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart'; import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart'; +import 'package:collaction_cms/presentation/shared/extra/list_counter.dart'; import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; @@ -37,41 +38,40 @@ class _CommitmentListPagesState extends State { Widget build(BuildContext context) { return Column( children: [ - Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - const SelectableText( - "Commitments", - style: CollactionTextStyles.captionStyleBold, - ), - Container( - margin: const EdgeInsets.only(left: 13), - alignment: Alignment.center, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(30), + Container( + margin: const EdgeInsets.only(top: 10), + child: Row( + children: [ + const SelectableText( + "Commitments", + style: CollactionTextStyles.captionStyleBold, ), - child: SelectableText( - dummyData.length.toString(), - style: CollactionTextStyles.captionStyle, + Center( + child: Counter( + counter: dummyData.length.toString(), + height: 15, + width: 15, + textStyle: + CollactionTextStyles.captionStyle.copyWith(height: 0), + )), + const Spacer(), + PreviousNextbutton( + buttonText: 'Previous', + buttonAction: () => controller.previousPage( + duration: _kDuration, curve: _kCurve), ), - ), - const Spacer(), - PreviousNextbutton( - buttonText: 'Previous', - buttonAction: () => - controller.previousPage(duration: _kDuration, curve: _kCurve), - ), - SelectableText( - "Page ${_currentPage + 1} of ${pages.length.toString()}", - style: CollactionTextStyles.captionStyleLight, - ), - PreviousNextbutton( - buttonText: 'Next', - buttonAction: () => - controller.nextPage(duration: _kDuration, curve: _kCurve), - ), - ], + SelectableText( + "Page ${_currentPage + 1} of ${pages.length.toString()}", + style: + CollactionTextStyles.captionStyleLight.copyWith(height: -1), + ), + PreviousNextbutton( + buttonText: 'Next', + buttonAction: () => + controller.nextPage(duration: _kDuration, curve: _kCurve), + ), + ], + ), ), SizedBox(height: widget.fullWidth - 100, child: buildPages(dummyData)), ], diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart index f145f6d..43f4380 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart @@ -86,7 +86,7 @@ class _ExpandableTemplateCardState extends State { children: [ SelectableText.rich(TextSpan( text: "Tags: ", - style: CollactionTextStyles.bodyMedium14, + style: CollactionTextStyles.bodySemiBold, children: [ TextSpan( text: widget.tags.toString(), @@ -96,7 +96,7 @@ class _ExpandableTemplateCardState extends State { const SizedBox(height: 5), SelectableText.rich(TextSpan( text: "Description: ", - style: CollactionTextStyles.bodyMedium14, + style: CollactionTextStyles.bodySemiBold, children: [ TextSpan( text: widget.description, @@ -106,7 +106,7 @@ class _ExpandableTemplateCardState extends State { const SizedBox(height: 5), SelectableText.rich(TextSpan( text: "Points: ", - style: CollactionTextStyles.bodyMedium14, + style: CollactionTextStyles.bodySemiBold, children: [ TextSpan( text: widget.points, diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart index ffed5a7..d042478 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart @@ -11,8 +11,8 @@ class PreviousNextbutton extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - height: 20, - margin: const EdgeInsets.only(left: 5, right: 5), + height: 25, + margin: const EdgeInsets.only(left: 10, right: 10), alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(30), @@ -24,7 +24,7 @@ class PreviousNextbutton extends StatelessWidget { onPressed: buttonAction, child: Text( buttonText, - style: CollactionTextStyles.captionStyleLight, + style: CollactionTextStyles.captionStyleLight.copyWith(height: -1), )), ); } diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart index 86ad8b9..ed92bcf 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart @@ -18,14 +18,17 @@ class _TagSearchSectionState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( - padding: const EdgeInsets.all(10.0), + padding: const EdgeInsets.only( + left: 10.0, + right: 10, + ), child: TextField( decoration: const InputDecoration( prefixIcon: Icon(Icons.search), prefixIconColor: Colors.grey, suffixIcon: Icon(Icons.add_circle_outline), suffixIconColor: Colors.grey, - hintText: 'Search commitmets templates tags', + hintText: 'Search commitment-template tags', hintStyle: CollactionTextStyles.captionStyleLight, enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.grey), diff --git a/lib/presentation/shared/extra/list_counter.dart b/lib/presentation/shared/extra/list_counter.dart index ce925b8..e50336e 100644 --- a/lib/presentation/shared/extra/list_counter.dart +++ b/lib/presentation/shared/extra/list_counter.dart @@ -1,29 +1,40 @@ import 'package:flutter/material.dart'; class Counter extends StatelessWidget { - const Counter({Key? key, required this.counter}) : super(key: key); - + const Counter( + {Key? key, + required this.counter, + this.width, + this.height, + this.textStyle}) + : super(key: key); + final double? width; + final double? height; + final TextStyle? textStyle; final String counter; @override Widget build(BuildContext context) { return Container( alignment: Alignment.center, - width: 25, - height: 25, + width: width ?? 25, + height: height ?? 25, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.white, border: Border.all(color: const Color(0xFFE7E7E7))), child: Container( transform: Matrix4.translationValues(2.2, 0, 0), - child: SelectableText( - counter, - style: const TextStyle( - fontSize: 14, - fontWeight: FontWeight.w600, - fontFamily: "Rubik", - color: Color(0xFF575757)), + child: Center( + child: SelectableText( + counter, + style: textStyle ?? + const TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + fontFamily: "Rubik", + color: Color(0xFF575757)), + ), ), ), ); From cf0a471b9e6c826e48be107a102ddc50b8a3ced2 Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Fri, 30 Jun 2023 15:56:03 +0100 Subject: [PATCH 10/11] fix: aesthetic changes --- .../commitment_template.dart | 8 ++- .../tag_search.dart | 64 ++++++++++++++----- lib/presentation/shared/extra/tags_pills.dart | 13 ++-- 3 files changed, 61 insertions(+), 24 deletions(-) diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart index 3162d89..476cbe5 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -17,9 +17,13 @@ class _CommitmentTemplateState extends State { return Padding( padding: const EdgeInsets.all(18.0), child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ - const TagSearchSection(), + const Padding( + padding: EdgeInsets.only(bottom: 5.0), + child: TagSearchSection(), + ), const Divider( - color: kBlackPrimary200, + color: kBlackPrimary100, + thickness: 1, ), CommitmentListPages(fullWidth: widget.fullWidth), ]), diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart index ed92bcf..af2c8e0 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart @@ -1,3 +1,5 @@ +import 'dart:ui'; + import 'package:flutter/material.dart'; import '../../../../../../../shared/extra/tags_pills.dart'; @@ -12,29 +14,57 @@ class TagSearchSection extends StatefulWidget { class _TagSearchSectionState extends State { List tags = ["Days", "Veganuary", "Diet"]; + String hintText = 'Search commitment-template tags'; + FocusNode focusNode = FocusNode(); + + @override + void initState() { + super.initState(); + focusNode.addListener(() { + setState(() { + if (focusNode.hasFocus) { + hintText = ''; + } else { + hintText = 'Search commitment-template tags'; + } + }); + }); + } + @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Padding( - padding: const EdgeInsets.only( - left: 10.0, - right: 10, - ), + SizedBox( + height: 24, child: TextField( - decoration: const InputDecoration( - prefixIcon: Icon(Icons.search), - prefixIconColor: Colors.grey, - suffixIcon: Icon(Icons.add_circle_outline), - suffixIconColor: Colors.grey, - hintText: 'Search commitment-template tags', - hintStyle: CollactionTextStyles.captionStyleLight, - enabledBorder: UnderlineInputBorder( - borderSide: BorderSide(color: Colors.grey), + cursorHeight: 12, + focusNode: focusNode, + cursorColor: kBlackPrimary200, + decoration: InputDecoration( + isDense: true, + contentPadding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 13.0), + prefixIcon: const Padding( + padding: EdgeInsets.only(right: 14.0, bottom: 10), + child: Icon( + Icons.search, + ), + ), + prefixIconColor: kBlackPrimary300, + suffixIcon: const Padding( + padding: EdgeInsets.only(bottom: 10.0), + child: Icon(Icons.add_circle_outline), + ), + suffixIconColor: kBlackPrimary300, + hintText: hintText, + hintStyle: CollactionTextStyles.captionStyle.copyWith( + color: const Color(0xFF707070), fontWeight: FontWeight.w200), + enabledBorder: const UnderlineInputBorder( + borderSide: BorderSide(color: kBlackPrimary100), ), - focusedBorder: UnderlineInputBorder( - borderSide: BorderSide(color: Colors.grey), + focusedBorder: const UnderlineInputBorder( + borderSide: BorderSide(color: kBlackPrimary100), ), ), onSubmitted: (seachedTag) { @@ -45,7 +75,7 @@ class _TagSearchSectionState extends State { ), ), const Padding( - padding: EdgeInsets.all(10.0), + padding: EdgeInsets.fromLTRB(10, 10, 0, 8), child: Text( "Selected tags:", style: CollactionTextStyles.captionStyleLight, diff --git a/lib/presentation/shared/extra/tags_pills.dart b/lib/presentation/shared/extra/tags_pills.dart index 434a621..88a5599 100644 --- a/lib/presentation/shared/extra/tags_pills.dart +++ b/lib/presentation/shared/extra/tags_pills.dart @@ -23,7 +23,7 @@ class TagPill extends StatelessWidget { padding: const EdgeInsets.all(5), decoration: BoxDecoration( color: backgroundColor, - borderRadius: BorderRadius.circular(15), + borderRadius: BorderRadius.circular(12), border: Border.all( color: const Color(0xFF707070).withOpacity(0.5), )), @@ -41,10 +41,13 @@ class TagPill extends StatelessWidget { ), ), const SizedBox(width: 5), - Text( - value, - style: CollactionTextStyles.captionStyleBold.copyWith( - color: const Color(0xFF585858), + Padding( + padding: const EdgeInsets.only(left: 5, right: 5), + child: Text( + value, + style: CollactionTextStyles.captionStyleBold.copyWith( + color: const Color(0xFF585858), + ), ), ) ], From 2b0360ea28e1ecada85761f2a8f5d90ad7d0700f Mon Sep 17 00:00:00 2001 From: Caglar Kullu Date: Fri, 30 Jun 2023 16:50:08 +0100 Subject: [PATCH 11/11] fix: aesthetic changes --- .../commitment_template.dart | 2 +- .../commitment_template_expandablecard.dart | 88 +++++++++++-------- .../tag_search.dart | 4 +- lib/presentation/theme/constants.dart | 1 + 4 files changed, 56 insertions(+), 39 deletions(-) diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart index 476cbe5..80127cf 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -22,7 +22,7 @@ class _CommitmentTemplateState extends State { child: TagSearchSection(), ), const Divider( - color: kBlackPrimary100, + color: kCommitmentDividerColor, thickness: 1, ), CommitmentListPages(fullWidth: widget.fullWidth), diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart index 43f4380..ae5462d 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart @@ -48,7 +48,7 @@ class _ExpandableTemplateCardState extends State { title: Row( children: [ Padding( - padding: const EdgeInsets.only(right: 10.0), + padding: const EdgeInsets.only(right: 10.0, top: 5, bottom: 5), child: Container( alignment: Alignment.center, decoration: BoxDecoration( @@ -80,41 +80,57 @@ class _ExpandableTemplateCardState extends State { title: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Divider(), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SelectableText.rich(TextSpan( - text: "Tags: ", - style: CollactionTextStyles.bodySemiBold, - children: [ - TextSpan( - text: widget.tags.toString(), - style: CollactionTextStyles.body14, - ) - ])), - const SizedBox(height: 5), - SelectableText.rich(TextSpan( - text: "Description: ", - style: CollactionTextStyles.bodySemiBold, - children: [ - TextSpan( - text: widget.description, - style: CollactionTextStyles.body14, - ) - ])), - const SizedBox(height: 5), - SelectableText.rich(TextSpan( - text: "Points: ", - style: CollactionTextStyles.bodySemiBold, - children: [ - TextSpan( - text: widget.points, - style: CollactionTextStyles.body14, - ) - ])), - const SizedBox(height: 5), - ], + const Divider( + color: kCommitmentDividerColor, + thickness: 1, + height: 8, + ), + Padding( + padding: const EdgeInsets.only(top: 5.0, bottom: 5, left: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SelectableText.rich(TextSpan( + text: "Tags: ", + style: CollactionTextStyles.bodySemiBold.copyWith( + fontSize: 14, + fontWeight: FontWeight.w500, + color: const Color(0xFF707070)), + children: [ + TextSpan( + text: widget.tags.toString(), + style: CollactionTextStyles.body14, + ) + ])), + const SizedBox(height: 5), + SelectableText.rich(TextSpan( + text: "Description: ", + style: CollactionTextStyles.bodySemiBold.copyWith( + fontSize: 14, + fontWeight: FontWeight.w500, + color: const Color(0xFF707070)), + children: [ + TextSpan( + text: widget.description, + style: CollactionTextStyles.body14, + ) + ])), + const SizedBox(height: 5), + SelectableText.rich(TextSpan( + text: "Points: ", + style: CollactionTextStyles.bodySemiBold.copyWith( + fontSize: 14, + fontWeight: FontWeight.w500, + color: const Color(0xFF707070)), + children: [ + TextSpan( + text: widget.points, + style: CollactionTextStyles.body14, + ) + ])), + const SizedBox(height: 5), + ], + ), ) ], ), diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart index af2c8e0..ce55654 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart @@ -61,10 +61,10 @@ class _TagSearchSectionState extends State { hintStyle: CollactionTextStyles.captionStyle.copyWith( color: const Color(0xFF707070), fontWeight: FontWeight.w200), enabledBorder: const UnderlineInputBorder( - borderSide: BorderSide(color: kBlackPrimary100), + borderSide: BorderSide(color: kCommitmentDividerColor), ), focusedBorder: const UnderlineInputBorder( - borderSide: BorderSide(color: kBlackPrimary100), + borderSide: BorderSide(color: kCommitmentDividerColor), ), ), onSubmitted: (seachedTag) { diff --git a/lib/presentation/theme/constants.dart b/lib/presentation/theme/constants.dart index a854f2b..8f14407 100644 --- a/lib/presentation/theme/constants.dart +++ b/lib/presentation/theme/constants.dart @@ -22,6 +22,7 @@ const kNavItemInactiveColor = Color(0xFF777777); const kNavItemActiveBackgroundColor = Color(0xFFF4F4F4); const kDividerColor = Color(0xFFBFBFBF); +const kCommitmentDividerColor = Color(0xFFDADADA); const kFillInputTextColor = Color(0xFFEFEFEF); const kPlaceholderTextColor = Color(0xFFB5B5B5);