improved web responsiveness

repositioned & changed Transactions Button
minor ui improvements

README.md

@@ -39,6 +39,8 @@
     A 3rd Party RevenueCat Cross Platform Client made with Flutter! This app is not endorsed nor affiliated by RevenueCat. Logo & Trademarks belongs to RevenueCat.
     <br />
     <br />
+    <a href="https://revenuecat.surge.sh">Web Client: https://revenuecat.surge.sh</a>
+    ·
     <a href="https://github.com/nemoryoliver/revenuecat-client/releases">Download & Install for Android & MacOS</a>
     ·
     <a href="https://github.com/nemoryoliver/revenuecat-client/issues">Report Bug</a>
@@ -80,8 +82,8 @@ We are very grateful that RevenueCat exists! It's now easier to integrate In-App
 - iOS
 - Android
 - Mac OS
+- [Web](https://revenuecat.surge.sh)
 - Windows (soon)
-- Web (soon)
 
 ### Features
 #### View Overview
@@ -155,8 +157,8 @@ flutter run
 * Notifications
 * Search Transactions with User ID & Email
 * Charts for RC Premium Users
-* Web Support
-* Windows Support
+* Windows Support (if requested)
+* Light Mode (if requested)
 
 See the [open issues](https://github.com/nemoryoliver/revenuecat-client/issues) for a list of proposed features (and known issues).
 

lib/core/utils/constants.dart

@@ -17,3 +17,5 @@ final String transactionsUrl = '$baseAPIUrl/developers/me/transactions';
 
 const String kGithubProjectUrl =
     'https://github.com/nemoryoliver/revenuecat-client';
+
+const kWebMaxWidth = 800.0;

lib/features/authentication/screen.dart

@@ -1,3 +1,4 @@
+import 'package:app/core/utils/constants.dart';
 import 'package:app/core/utils/logger.dart';
 import 'package:app/features/authentication/screen.controller.dart';
 import 'package:flutter/material.dart';
@@ -18,9 +19,10 @@ class AuthScreen extends StatelessWidget {
     final _details =
         "We are very grateful that RevenueCat exists! It's now easier to integrate In-App Purchase features in our apps with minimal code and less complexity. Yes, you can use RevenueCat's Web Dashboard to see everything, but come on, an app is better on mobile. ";
 
-    final _content = Padding(
-      padding: EdgeInsets.all(20),
-      child: Center(
+    final _content = Center(
+      child: Container(
+        padding: EdgeInsets.all(20),
+        constraints: BoxConstraints(maxWidth: kWebMaxWidth),
         child: SingleChildScrollView(
           child: Column(
             mainAxisSize: MainAxisSize.min,

lib/features/main/screen.controller.dart

@@ -5,6 +5,7 @@ import 'package:app/features/authentication/screen.dart';
 import 'package:app/features/general/custom_dialog.widget.dart';
 import 'package:app/features/overview/screen.controller.dart';
 import 'package:app/features/overview_day/screen.controller.dart';
+import 'package:app/features/transactions/screen.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_easyrefresh/easy_refresh.dart';
@@ -78,7 +79,7 @@ class MainScreenController extends GetxController {
       transitionDuration: const Duration(milliseconds: 200),
       pageBuilder: (_, __, ___) => CustomDialog(
         'RevenueCat',
-        'An unonofficial client for RevenueCat. Not endorsed or affiliated at all.\n$version',
+        'An unonofficial client for RevenueCat.\nNot endorsed or affiliated at all.\n$version',
         image: Image.asset('assets/images/revenuecat.png', height: 50),
         child: Column(
           children: [
@@ -97,7 +98,7 @@ class MainScreenController extends GetxController {
             ),
             SizedBox(height: 10),
             Text(
-              'Credits to RevenueCat for their amazing service and to all contributors of the project!',
+              'Credits to RevenueCat for their amazing service\nand to all contributors of the project!',
               style: TextStyle(color: Colors.grey, fontSize: 13),
               textAlign: TextAlign.center,
             )
@@ -109,5 +110,12 @@ class MainScreenController extends GetxController {
     );
   }
 
-  void segmentedChanged(int index) => segmentedIndex.value = index;
+  void segmentedChanged(int index) {
+    if (index < 2) {
+      segmentedIndex.value = index;
+    } else {
+      // TRANSACTIONS
+      Get.to(TransactionsScreen());
+    }
+  }
 }

lib/features/main/screen.dart

@@ -17,31 +17,55 @@ class MainScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     final _uiController = Get.put(MainScreenController());
 
-    final _content = EasyRefresh(
-      header: MaterialHeader(),
-      onRefresh: _uiController.refresh,
-      controller: _uiController.refreshController,
-      child: SingleChildScrollView(
-        padding: EdgeInsets.symmetric(horizontal: 10),
-        child: Column(
-          children: [
-            SegmentedSwitch(
-              fontSize: 13,
-              onChanged: _uiController.segmentedChanged,
-              tabs: [
-                Tab(text: 'OVERVIEW'),
-                Tab(text: 'DAY'),
+    final _content = Center(
+      child: Container(
+        constraints: BoxConstraints(maxWidth: kWebMaxWidth),
+        padding: EdgeInsets.only(top: 20),
+        child: EasyRefresh(
+          header: MaterialHeader(),
+          onRefresh: _uiController.refresh,
+          controller: _uiController.refreshController,
+          child: SingleChildScrollView(
+            padding: EdgeInsets.symmetric(horizontal: 10),
+            child: Column(
+              children: [
+                Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    SegmentedSwitch(
+                      fontSize: 13,
+                      onChanged: _uiController.segmentedChanged,
+                      tabs: [
+                        Tab(text: 'OVERVIEW'),
+                        Tab(text: 'DAY'),
+                      ],
+                    ),
+                    Padding(
+                      padding: EdgeInsets.only(bottom: 3, left: 0),
+                      child: FlatButton(
+                        child: Text(
+                          'TRANSACTIONS',
+                          style: TextStyle(
+                            fontWeight: FontWeight.w700,
+                            color: Colors.grey,
+                          ),
+                        ),
+                        onPressed: () => Get.to(TransactionsScreen()),
+                      ),
+                    ),
+                  ],
+                ),
+                Divider(height: 0),
+                Obx(
+                  () => Visibility(
+                    visible: _uiController.segmentedIndex.value == 0,
+                    child: OverviewScreen(),
+                    replacement: OverviewDayScreen(),
+                  ),
+                ),
               ],
             ),
-            Divider(height: 0),
-            Obx(
-              () => Visibility(
-                visible: _uiController.segmentedIndex.value == 0,
-                child: OverviewScreen(),
-                replacement: OverviewDayScreen(),
-              ),
-            ),
-          ],
+          ),
         ),
       ),
     );
@@ -77,10 +101,10 @@ class MainScreen extends StatelessWidget {
     return Scaffold(
       appBar: _title,
       body: _content,
-      floatingActionButton: FloatingActionButton(
-        onPressed: () => Get.to(TransactionsScreen()),
-        child: Icon(Icons.payment),
-      ),
+      // floatingActionButton: FloatingActionButton(
+      //   onPressed: () => Get.to(TransactionsScreen()),
+      //   child: Icon(Icons.payment),
+      // ),
     );
   }
 }

lib/features/overview/screen.dart

@@ -89,7 +89,7 @@ class OverviewScreen extends StatelessWidget {
           visible: _uiController.busy,
           replacement: _content,
           child: kIsWeb
-              ? Center(child: CircularProgressIndicator())
+              ? Opacity(opacity: 0.5, child: _content)
               : Shimmer.fromColors(
                   child: _content,
                   baseColor: Colors.grey.withOpacity(0.5),

lib/features/overview_day/screen.dart

@@ -200,7 +200,7 @@ class OverviewDayScreen extends StatelessWidget {
           visible: _uiController.busy,
           replacement: _content,
           child: kIsWeb
-              ? Center(child: CircularProgressIndicator())
+              ? Opacity(opacity: 0.5, child: _content)
               : Shimmer.fromColors(
                   child: _content,
                   baseColor: Colors.grey.withOpacity(0.5),

lib/features/transactions/screen.dart

@@ -1,3 +1,4 @@
+import 'package:app/core/utils/constants.dart';
 import 'package:app/core/utils/logger.dart';
 import 'package:app/features/general/empty_placeholder.widget.dart';
 import 'package:app/features/transactions/screen.controller.dart';
@@ -14,21 +15,6 @@ class TransactionsScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     final _uiController = Get.put(TransactionsScreenController());
 
-    Widget _itemBuilder(context, index) {
-      final data = _uiController.data.value[index];
-
-      return AnimationConfiguration.staggeredList(
-        position: index,
-        duration: const Duration(milliseconds: 375),
-        child: SlideAnimation(
-          verticalOffset: 50.0,
-          child: FadeInAnimation(
-            child: TransactionsTile(data),
-          ),
-        ),
-      );
-    }
-
     final _title = AppBar(
       title: Text(
         'Transactions',
@@ -67,44 +53,62 @@ class TransactionsScreen extends StatelessWidget {
       ),
     );
 
-    final _content = Padding(
-      padding: EdgeInsets.only(top: 10),
-      child: AnimationLimiter(
-        child: Obx(
-          () => Column(
-            children: [
-              _searchBox,
-              Visibility(
-                visible: _uiController.count == 0,
-                replacement: Expanded(
-                  child: EasyRefresh(
-                    header: MaterialHeader(),
-                    footer: MaterialFooter(),
-                    onRefresh: _uiController.refresh,
-                    onLoad: _uiController.fetchNext,
-                    controller: _uiController.refreshController,
-                    child: ListView.separated(
-                      shrinkWrap: true,
-                      itemCount: _uiController.count,
-                      itemBuilder: _itemBuilder,
-                      separatorBuilder: (_, __) => Divider(),
+    Widget _itemBuilder(context, index) {
+      final data = _uiController.data.value[index];
+
+      return AnimationConfiguration.staggeredList(
+        position: index,
+        duration: const Duration(milliseconds: 375),
+        child: SlideAnimation(
+          verticalOffset: 50.0,
+          child: FadeInAnimation(
+            child: TransactionsTile(data),
+          ),
+        ),
+      );
+    }
+
+    final _content = Center(
+      child: Container(
+        padding: EdgeInsets.only(top: 10),
+        constraints: BoxConstraints(maxWidth: kWebMaxWidth),
+        child: AnimationLimiter(
+          child: Obx(
+            () => Column(
+              children: [
+                _searchBox,
+                Visibility(
+                  visible: _uiController.count == 0,
+                  replacement: Expanded(
+                    child: EasyRefresh(
+                      header: MaterialHeader(),
+                      footer: MaterialFooter(),
+                      onRefresh: _uiController.refresh,
+                      onLoad: _uiController.fetchNext,
+                      controller: _uiController.refreshController,
+                      child: ListView.separated(
+                        shrinkWrap: true,
+                        itemCount: _uiController.count,
+                        itemBuilder: _itemBuilder,
+                        separatorBuilder: (_, __) => Divider(),
+                      ),
                     ),
                   ),
-                ),
-                child: Expanded(
-                  child: EmptyPlaceholder(
-                    iconData: Icons.search,
-                    message: 'No Results',
-                    child: OutlineButton(
-                      child: Text('Refresh'),
-                      shape: RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(20)),
-                      onPressed: _uiController.fetch,
+                  child: Expanded(
+                    child: EmptyPlaceholder(
+                      iconData: Icons.search,
+                      message: 'No Results',
+                      child: OutlineButton(
+                        child: Text('Refresh'),
+                        shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(20)),
+                        onPressed: _uiController.fetch,
+                      ),
                     ),
                   ),
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
         ),
       ),

lib/features/transactions/tile.dart

@@ -74,7 +74,7 @@ class TransactionsTile extends StatelessWidget {
         Text(
           NumberFormat.simpleCurrency().format(object.revenue),
           style: TextStyle(
-            fontSize: 17,
+            fontSize: 15,
             fontWeight: FontWeight.bold,
             color: object.revenue > 0
                 ? Colors.lightGreen

lib/main.dart

@@ -22,7 +22,6 @@ class App extends StatelessWidget {
   Widget build(BuildContext context) {
     return GetMaterialApp(
       title: kApptitle,
-      initialRoute: '/',
       home: MainScreen(),
       debugShowCheckedModeBanner: false,
       theme: ThemeData(

macos/Podfile.lock

@@ -23,7 +23,7 @@ PODS:
 DEPENDENCIES:
   - connectivity (from `Flutter/ephemeral/.symlinks/plugins/connectivity/macos`)
   - connectivity_macos (from `Flutter/ephemeral/.symlinks/plugins/connectivity_macos/macos`)
-  - FlutterMacOS (from `Flutter/ephemeral/.symlinks/flutter/darwin-x64-release`)
+  - FlutterMacOS (from `Flutter/ephemeral/.symlinks/flutter/darwin-x64`)
   - package_info (from `Flutter/ephemeral/.symlinks/plugins/package_info/macos`)
   - path_provider (from `Flutter/ephemeral/.symlinks/plugins/path_provider/macos`)
   - path_provider_macos (from `Flutter/ephemeral/.symlinks/plugins/path_provider_macos/macos`)
@@ -42,7 +42,7 @@ EXTERNAL SOURCES:
   connectivity_macos:
     :path: Flutter/ephemeral/.symlinks/plugins/connectivity_macos/macos
   FlutterMacOS:
-    :path: Flutter/ephemeral/.symlinks/flutter/darwin-x64-release
+    :path: Flutter/ephemeral/.symlinks/flutter/darwin-x64
   package_info:
     :path: Flutter/ephemeral/.symlinks/plugins/package_info/macos
   path_provider: