From 8f2c74d432c7df76c848ab27f6f857f1889631d7 Mon Sep 17 00:00:00 2001 From: Saif Nbet Date: Mon, 9 Sep 2024 13:33:19 +0100 Subject: [PATCH] feat: Implement filter screen UI --- .../filter/components/filter_view.dart | 83 +++++++++ .../filter/components/hypha_filter_card.dart | 60 +++++++ lib/ui/proposals/filter/filter_page.dart | 11 ++ .../list/components/proposals_view.dart | 168 +++++++++++------- 4 files changed, 254 insertions(+), 68 deletions(-) create mode 100644 lib/ui/proposals/filter/components/filter_view.dart create mode 100644 lib/ui/proposals/filter/components/hypha_filter_card.dart create mode 100644 lib/ui/proposals/filter/filter_page.dart diff --git a/lib/ui/proposals/filter/components/filter_view.dart b/lib/ui/proposals/filter/components/filter_view.dart new file mode 100644 index 00000000..830693b2 --- /dev/null +++ b/lib/ui/proposals/filter/components/filter_view.dart @@ -0,0 +1,83 @@ +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; +import 'package:hypha_wallet/design/buttons/hypha_app_button.dart'; +import 'package:hypha_wallet/design/hypha_colors.dart'; +import 'package:hypha_wallet/design/themes/extensions/theme_extension_provider.dart'; +import 'package:hypha_wallet/ui/proposals/filter/components/hypha_filter_card.dart'; + +class FilterView extends StatelessWidget { + FilterView({super.key}); + + final List statusFilters = ['Active Proposals', 'Past Proposals']; + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: + context.isDarkMode ? HyphaColors.darkBlack : HyphaColors.offWhite, + appBar: AppBar( + title: const Text('Filter Proposals'), + ), + body: Padding( + padding: const EdgeInsets.symmetric(horizontal: 26.0, vertical: 20), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Filter by your DAOs', + style: context.hyphaTextTheme.ralMediumBody + .copyWith(color: HyphaColors.midGrey), + ), + const SizedBox( + height: 10, + ), + ...List.generate( + 3, + (index) { + return Container( + margin: const EdgeInsets.symmetric(vertical: 10), + child: HyphaFilterCard( + title: 'Hypha DAO', + imageUrl: + 'https://etudestech.com/wp-content/uploads/2023/05/midjourney-scaled.jpeg', + subTitle: '6 Active Proposals', + isSelected: index == 0, + )); + }, + ), + const SizedBox( + height: 10, + ), + Text( + 'Filter By Status', + style: context.hyphaTextTheme.ralMediumBody + .copyWith(color: HyphaColors.midGrey), + ), + const SizedBox( + height: 10, + ), + ...List.generate( + 2, + (index) { + return Container( + margin: const EdgeInsets.symmetric(vertical: 10), + child: HyphaFilterCard( + title: statusFilters[index], + isSelected: index == 0, + )); + }, + ), + const Spacer(), + HyphaAppButton( + title: 'SAVE FILTERS', + onPressed: () {}, + ), + const SizedBox( + height: 20, + ) + ], + ), + ), + ); + } +} diff --git a/lib/ui/proposals/filter/components/hypha_filter_card.dart b/lib/ui/proposals/filter/components/hypha_filter_card.dart new file mode 100644 index 00000000..20a6f248 --- /dev/null +++ b/lib/ui/proposals/filter/components/hypha_filter_card.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; +import 'package:hypha_wallet/design/avatar_image/hypha_avatar_image.dart'; +import 'package:hypha_wallet/design/hypha_card.dart'; +import 'package:hypha_wallet/design/hypha_colors.dart'; +import 'package:hypha_wallet/design/themes/extensions/theme_extension_provider.dart'; + +class HyphaFilterCard extends StatelessWidget { + final String? imageUrl; + final String title; + final String? subTitle; + final bool isSelected; + + const HyphaFilterCard( + {required this.title, + this.isSelected = false, + this.subTitle, + this.imageUrl, + super.key}); + + @override + Widget build(BuildContext context) { + return HyphaCard( + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20), + child: Row( + children: [ + if (imageUrl != null) + HyphaAvatarImage( + imageRadius: 24, + imageFromUrl: imageUrl, + ), + const SizedBox( + width: 10, + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + title, + style: context.hyphaTextTheme.smallTitles, + ), + if (subTitle != null) + Text( + subTitle!, + style: context.hyphaTextTheme.ralMediumBody + .copyWith(color: HyphaColors.midGrey), + ), + ], + ), + const Spacer(), + if (isSelected) + const CircleAvatar( + radius: 12, + backgroundColor: HyphaColors.primaryBlu, + ) + ], + ), + )); + } +} diff --git a/lib/ui/proposals/filter/filter_page.dart b/lib/ui/proposals/filter/filter_page.dart new file mode 100644 index 00000000..71e67ea4 --- /dev/null +++ b/lib/ui/proposals/filter/filter_page.dart @@ -0,0 +1,11 @@ +import 'package:flutter/material.dart'; +import 'package:hypha_wallet/ui/proposals/filter/components/filter_view.dart'; + +class FilterPage extends StatelessWidget { + const FilterPage({super.key}); + + @override + Widget build(BuildContext context) { + return FilterView(); + } +} diff --git a/lib/ui/proposals/list/components/proposals_view.dart b/lib/ui/proposals/list/components/proposals_view.dart index b823935f..165be24f 100644 --- a/lib/ui/proposals/list/components/proposals_view.dart +++ b/lib/ui/proposals/list/components/proposals_view.dart @@ -7,66 +7,71 @@ import 'package:hypha_wallet/design/hypha_colors.dart'; import 'package:hypha_wallet/design/themes/extensions/theme_extension_provider.dart'; import 'package:hypha_wallet/ui/blocs/authentication/authentication_bloc.dart'; import 'package:hypha_wallet/ui/profile/profile_page.dart'; +import 'package:hypha_wallet/ui/proposals/filter/filter_page.dart'; import 'package:hypha_wallet/ui/proposals/list/components/hypha_proposals_action_card.dart'; import 'package:hypha_wallet/ui/proposals/list/interactor/proposals_bloc.dart'; import 'package:hypha_wallet/ui/shared/hypha_body_widget.dart'; class ProposalsView extends StatelessWidget { const ProposalsView({super.key}); + @override Widget build(BuildContext context) { return BlocBuilder( - builder: (context,state) { - return HyphaPageBackground( - backgroundTexture: 'assets/images/graphics/wallet_background.png', - withOpacity: false, - child: Scaffold( - backgroundColor: HyphaColors.transparent, - appBar: AppBar( - scrolledUnderElevation: 0, - backgroundColor: Colors.transparent, - actions: [ - const _NewProposalButton(), - const SizedBox( - width: 20, - ) + builder: (context, state) { + return HyphaPageBackground( + backgroundTexture: 'assets/images/graphics/wallet_background.png', + withOpacity: false, + child: Scaffold( + backgroundColor: HyphaColors.transparent, + appBar: AppBar( + scrolledUnderElevation: 0, + backgroundColor: Colors.transparent, + actions: [ + const _NewProposalButton(), + const SizedBox( + width: 20, + ) + ], + title: Row( + children: [ + BlocBuilder( + builder: (context, state) { + return HyphaAvatarImage( + onTap: () { + GetX.Get.to( + const ProfilePage(), + transition: GetX.Transition.leftToRight, + ); + }, + imageRadius: 19, + imageFromUrl: state.userProfileData?.userImage, + name: state.userProfileData?.userName, + ); + }, + ), + const SizedBox(width: 12), + Text( + 'Proposals', + style: context.hyphaTextTheme.bigTitles + .copyWith(color: HyphaColors.white), + ), ], - title: Row( - children: [ - BlocBuilder( - builder: (context, state) { - return HyphaAvatarImage( - onTap: () { - GetX.Get.to( - const ProfilePage(), - transition: GetX.Transition.leftToRight, - ); - }, - imageRadius: 19, - imageFromUrl: state.userProfileData?.userImage, - name: state.userProfileData?.userName, - ); - }, - ), - const SizedBox(width: 12), - Text( - 'Proposals', - style: context.hyphaTextTheme.bigTitles - .copyWith(color: HyphaColors.white), - ), - ], - ), - titleSpacing: 20, ), - body: RefreshIndicator( - onRefresh: () async{ - context.read().add(const ProposalsEvent.initial()); + titleSpacing: 20, + ), + body: RefreshIndicator( + onRefresh: () async { + context + .read() + .add(const ProposalsEvent.initial()); }, child: Container( margin: const EdgeInsets.only(top: 20), decoration: BoxDecoration( color: context.isDarkMode ? null : HyphaColors.offWhite, - gradient: context.isDarkMode ? HyphaColors.gradientBlack : null, + gradient: + context.isDarkMode ? HyphaColors.gradientBlack : null, borderRadius: const BorderRadius.only( topLeft: Radius.circular(28), topRight: Radius.circular(28), @@ -77,34 +82,55 @@ class ProposalsView extends StatelessWidget { ), child: HyphaBodyWidget( pageState: state.pageState, - success:(context) => Padding( + success: (context) => Padding( padding: const EdgeInsets.symmetric(horizontal: 22), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const SizedBox(height: 22,), - Text('${state.proposals.length} Active Proposals',style: context.hyphaTextTheme.ralMediumBody.copyWith(color: HyphaColors.midGrey ),), - const SizedBox(height: 20,), - Expanded( - child: ListView.separated( - padding: const EdgeInsets.only(bottom: 22), - itemBuilder: (BuildContext context,int index) => HyphaProposalsActionCard(proposalModel: state.proposals[index],), - separatorBuilder: (BuildContext context, int index) { - return const SizedBox(height: 16); - }, - itemCount: state.proposals.length) + const SizedBox( + height: 22, + ), + Text( + '${state.proposals.length} Active Proposals', + style: context.hyphaTextTheme.ralMediumBody + .copyWith(color: HyphaColors.midGrey), ), + const SizedBox( + height: 20, + ), + Expanded( + child: ListView.separated( + padding: const EdgeInsets.only(bottom: 22), + itemBuilder: (BuildContext context, + int index) => + HyphaProposalsActionCard( + proposalModel: state.proposals[index], + ), + separatorBuilder: + (BuildContext context, int index) { + return const SizedBox(height: 16); + }, + itemCount: state.proposals.length)), ], ), ), ), - ) - ), - )); - } - ); - - + )), + floatingActionButton: IconButton( + onPressed: () { + GetX.Get.to( + const FilterPage(), + transition: GetX.Transition.leftToRight, + ); + }, + icon: const CircleAvatar( + radius: 30, + backgroundImage: AssetImage( + 'assets/images/graphics/wallet_background.png'), + child: Icon(Icons.filter_alt_outlined, + color: HyphaColors.white))), + )); + }); } } @@ -115,9 +141,10 @@ class _NewProposalButton extends StatelessWidget { Widget build(BuildContext context) { return Row( children: [ - Text( + Text( 'New Proposal', - style: context.hyphaTextTheme.regular.copyWith(color: Colors.white, fontSize: 12), + style: context.hyphaTextTheme.regular + .copyWith(color: Colors.white, fontSize: 12), ), const SizedBox(width: 10), GestureDetector( @@ -126,14 +153,19 @@ class _NewProposalButton extends StatelessWidget { width: 38, height: 38, decoration: BoxDecoration( - color: context.isDarkMode ? HyphaColors.darkBlack : HyphaColors.offWhite, + color: context.isDarkMode + ? HyphaColors.darkBlack + : HyphaColors.offWhite, borderRadius: BorderRadius.circular(12), ), - child: Icon(Icons.add_outlined, size: 25, color: context.isDarkMode ? HyphaColors.white : HyphaColors.darkBlack ), + child: Icon(Icons.add_outlined, + size: 25, + color: context.isDarkMode + ? HyphaColors.white + : HyphaColors.darkBlack), ), ), ], ); } } -