feat: completed designing sponsor page

lib/models/sponsor/sponsor.dart

@@ -10,16 +10,12 @@ class Sponsor {
   /// name of the sponsor
   final String name;
 
-  /// email of the sponsor
-  final String email;
-
   /// mode of the sponsorship
   final String mode;
 
   Sponsor({
     required this.paladinsName,
     required this.name,
-    required this.email,
     required this.mode,
   });
 

lib/screens/sponsor/sponsor.dart

@@ -7,6 +7,7 @@ import "package:hooks_riverpod/hooks_riverpod.dart";
 import "package:paladinsedge/providers/index.dart" as providers;
 import "package:paladinsedge/screens/sponsor/sponsor_card.dart";
 import "package:paladinsedge/utilities/index.dart" as utilities;
+import "package:paladinsedge/widgets/index.dart" as widgets;
 
 class Sponsor extends HookConsumerWidget {
   static const routeName = "sponsor";
@@ -39,11 +40,19 @@ class Sponsor extends HookConsumerWidget {
       body: SafeArea(
         child: Stack(
           children: [
-            sponsors == null
-                ? const SizedBox()
-                : SponsorCard(
-                    hasSponsors: sponsors.isEmpty,
-                  ),
+            Center(
+              child: sponsors == null
+                  ? const Center(
+                      child: widgets.LoadingIndicator(
+                        lineWidth: 2,
+                        size: 28,
+                        label: Text("Loading Sponsors"),
+                      ),
+                    )
+                  : SponsorCard(
+                      hasSponsors: sponsors.isNotEmpty,
+                    ),
+            ),
             if (utilities.Navigation.canPop(context))
               Padding(
                 padding: const EdgeInsets.all(4),

lib/screens/sponsor/sponsor_button.dart

@@ -31,10 +31,7 @@ class SponsorButton extends StatelessWidget {
                 borderRadius: BorderRadius.all(Radius.circular(18.0)),
               ),
               elevation: 5,
-              padding: const EdgeInsets.symmetric(
-                horizontal: 20,
-                vertical: 10,
-              ),
+              padding: const EdgeInsets.all(20),
             ),
           ),
         ),

lib/screens/sponsor/sponsor_card.dart

@@ -1,5 +1,6 @@
 import "package:flutter/material.dart";
 import "package:paladinsedge/screens/sponsor/sponsor_button.dart";
+import "package:paladinsedge/screens/sponsor/sponsor_list.dart";
 
 class SponsorCard extends StatelessWidget {
   final bool hasSponsors;
@@ -12,6 +13,18 @@ class SponsorCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     // Variables
+    double horizontalPadding;
+    double width;
+    final size = MediaQuery.of(context).size;
+    if (size.height < size.width) {
+      // for landscape mode
+      width = size.width * 0.5;
+      horizontalPadding = (size.width - width) / 2;
+    } else {
+      // for portrait mode
+      width = size.width;
+      horizontalPadding = 15;
+    }
     final textTheme = Theme.of(context).textTheme;
     final headingTheme = textTheme.displayLarge?.copyWith(
       fontSize: 22,
@@ -21,7 +34,8 @@ class SponsorCard extends StatelessWidget {
       fontSize: 16,
     );
 
-    return Center(
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
       child: SizedBox(
         width: double.infinity,
         child: Card(
@@ -31,40 +45,52 @@ class SponsorCard extends StatelessWidget {
               Radius.circular(30),
             ), // Set your desired radius here
           ),
-          margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 25),
           child: Padding(
-            padding: const EdgeInsets.all(25),
+            padding: const EdgeInsets.symmetric(vertical: 25),
             child: Column(
-              mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
               children: [
-                Text(
-                  hasSponsors
-                      ? "Become our first sponsor!"
-                      : "Why sponsor Paladins Edge?",
-                  style: headingTheme,
-                ),
-                const SizedBox(height: 20),
-                FittedBox(
-                  child: Text(
-                    "1. App improvement and bug fixes",
-                    style: pointersTheme,
-                  ),
-                ),
-                FittedBox(
-                  child: Text(
-                    "2. Help fund new features coming in future",
-                    style: pointersTheme,
-                  ),
-                ),
-                FittedBox(
-                  child: Text(
-                    "3. Cover server costs for reliable operation",
-                    style: pointersTheme,
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 25),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        hasSponsors
+                            ? "Why sponsor Paladins Edge?"
+                            : "Become our first sponsor!",
+                        style: headingTheme,
+                      ),
+                      const SizedBox(height: 20),
+                      FittedBox(
+                        child: Text(
+                          "1. App improvement and bug fixes",
+                          style: pointersTheme,
+                        ),
+                      ),
+                      FittedBox(
+                        child: Text(
+                          "2. Help fund new features coming in future",
+                          style: pointersTheme,
+                        ),
+                      ),
+                      FittedBox(
+                        child: Text(
+                          "3. Cover server costs for reliable operation",
+                          style: pointersTheme,
+                        ),
+                      ),
+                    ],
                   ),
                 ),
+                if (hasSponsors) const SizedBox(height: 20),
+                if (hasSponsors) const SponsorList(),
                 const SizedBox(height: 30),
-                const SponsorButton(),
+                const Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 20),
+                  child: SponsorButton(),
+                ),
               ],
             ),
           ),

lib/screens/sponsor/sponsor_list.dart

@@ -0,0 +1,73 @@
+import "package:flutter/material.dart";
+import "package:hooks_riverpod/hooks_riverpod.dart";
+import "package:paladinsedge/providers/index.dart" as providers;
+
+class SponsorList extends ConsumerWidget {
+  const SponsorList({Key? key}) : super(key: key);
+
+  static const itemHeight = 50.0;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    // Providers
+    final sponsors = ref.watch(providers.auth.select((_) => _.sponsors));
+
+    // Variables
+    final textTheme = Theme.of(context).textTheme;
+
+    return sponsors == null
+        ? const SizedBox()
+        : SizedBox(
+            height: itemHeight,
+            child: ListView.separated(
+              scrollDirection: Axis.horizontal,
+              padding: const EdgeInsets.symmetric(horizontal: 35),
+              itemCount: sponsors.length + 1,
+              separatorBuilder: ((context, index) => index == 0
+                  ? const SizedBox(width: 20)
+                  : const SizedBox(width: 10)),
+              itemBuilder: (_, index) {
+                if (index == 0) {
+                  return Center(
+                    child: Text(
+                      "Our Sponsors",
+                      style: textTheme.bodyLarge?.copyWith(fontSize: 20),
+                    ),
+                  );
+                }
+
+                final sponsor = sponsors[index - 1];
+
+                return Container(
+                  decoration: BoxDecoration(
+                    borderRadius: const BorderRadius.all(Radius.circular(10)),
+                    border: Border.all(
+                      width: 2,
+                      color: textTheme.displayLarge!.color!,
+                    ),
+                  ),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 20),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Text(
+                          sponsor.name,
+                          style: textTheme.displayLarge?.copyWith(
+                            fontSize: 14,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                        Text(
+                          sponsor.paladinsName,
+                          style: textTheme.bodyLarge?.copyWith(fontSize: 12),
+                        ),
+                      ],
+                    ),
+                  ),
+                );
+              },
+            ),
+          );
+  }
+}

pubspec.assets.yaml

@@ -16,7 +16,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 
-version: 1.9.1
+version: 1.10.0
 
 homepage: "https://paladinsedge.app"
 

pubspec.yaml

@@ -16,7 +16,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev
 # Read more about iOS versioning at
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 
-version: 1.9.1
+version: 1.10.0
 
 homepage: "https://paladinsedge.app"