Merge pull request #305 from hypha-dao/feat/implement-filter-screen-ui

feat: Implement filter screen UI
hypha-dao · Sep 9, 2024 · 6bdb5de · 6bdb5de
2 parents 3a14363 + 8f2c74d
commit 6bdb5de
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 68 deletions.
diff --git a/lib/ui/proposals/filter/components/filter_view.dart 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<String> 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
@@ -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
@@ -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
@@ -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<ProposalsBloc, ProposalsState>(
-      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<AuthenticationBloc, AuthenticationState>(
+                    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<AuthenticationBloc, AuthenticationState>(
-                      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<ProposalsBloc>().add(const ProposalsEvent.initial());
+              titleSpacing: 20,
+            ),
+            body: RefreshIndicator(
+                onRefresh: () async {
+                  context
+                      .read<ProposalsBloc>()
+                      .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),
           ),
         ),
       ],
     );
   }
 }
-