fix: git ignore

.gitignore

@@ -30,6 +30,8 @@ migrate_working_dir/
 .pub-cache/
 .pub/
 /build/
+/.env
+/lib/services/env/
 
 # Symbolication related
 app.*.symbols

.metadata

@@ -15,7 +15,7 @@ migration:
     - platform: root
       create_revision: abb292a07e20d696c4568099f918f6c5f330e6b0
       base_revision: abb292a07e20d696c4568099f918f6c5f330e6b0
-    - platform: windows
+    - platform: web
       create_revision: abb292a07e20d696c4568099f918f6c5f330e6b0
       base_revision: abb292a07e20d696c4568099f918f6c5f330e6b0
 

lib/main.dart

@@ -3,9 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hive_flutter/adapters.dart';
 import 'package:ios_icon_finder/services/favorite_icons/models/fav_icon_model.dart';
-import 'package:ios_icon_finder/src/pages/home/home_page.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:device_preview/device_preview.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/home_page.dart';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -35,6 +35,7 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Ios Icon Finder',
+      // ignore: deprecated_member_use
       useInheritedMediaQuery: true,
       locale: DevicePreview.locale(context),
       builder: DevicePreview.appBuilder,

lib/services/ios _icons/services/ios_icon_service.dart

@@ -6,7 +6,7 @@ import 'package:http/http.dart' as http;
 part 'ios_icon_service.g.dart';
 
 
-@riverpod
+@Riverpod(keepAlive: true)
 class IosIconService extends _$IosIconService {
   @override
   Future<List<IosIcon>> build() async {

lib/src/global/constant/app_text.dart

@@ -3,6 +3,6 @@ const String madeWithLove = 'Made with ❤️ by BadazzHarry';
 
 const String favIconsList = 'Favorites Icons';
 const String favNotFound = 'No Favorite Icons Found!';
-const String hintText = 'Please search the name of icon';
+const String hintText = 'Please search icon name';
 const String noMatchFound = 'No Match Found!';
 // const String appName = 'Cupertino Icons Finder';

lib/src/global/extensions/responsive_extension.dart

@@ -0,0 +1,3 @@
+extension ScreenSizeResponsive on double {
+  bool get isMobile => this <= 375 ? true : false;
+}

lib/src/pages/fav_icons/fav_icons_page.dart → lib/src/pages/mobile/fav_icons/fav_icons_page.dart

@@ -7,7 +7,7 @@ import 'package:ios_icon_finder/services/ios%20_icons/models/ios_icon_model.dart
 import 'package:ios_icon_finder/src/global/constant/app_text.dart';
 import 'package:ios_icon_finder/src/global/theme/app_color.dart';
 import 'package:ios_icon_finder/src/global/widgets/empty_ui.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/icon_card/icon_card.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_card/icon_card.dart';
 
 class FavIconsPage extends ConsumerWidget {
   const FavIconsPage({super.key});

lib/src/pages/home/components/body_component.dart → lib/src/pages/mobile/home/components/body_component.dart

@@ -2,7 +2,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:ios_icon_finder/services/ios%20_icons/models/ios_icon_model.dart';
 import 'package:ios_icon_finder/src/global/constant/app_text.dart';
 import 'package:ios_icon_finder/src/global/widgets/empty_ui.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/icon_list.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_list.dart';
 
 class BodyComponent extends StatelessWidget {
   const BodyComponent({super.key, required this.icons});

lib/src/pages/home/components/title_component.dart → lib/src/pages/mobile/home/components/title_component.dart

@@ -1,7 +1,7 @@
 import 'package:flextras/flextras.dart';
 import 'package:flutter/material.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/app_title.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/icon_search_bar.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/app_title.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_search_bar.dart';
 
 class TitleComponent extends StatelessWidget {
   const TitleComponent({

lib/src/pages/home/home_page.dart → lib/src/pages/mobile/home/home_page.dart

@@ -4,11 +4,11 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:ios_icon_finder/services/ios%20_icons/providers/ios_icon_provider.dart';
 import 'package:ios_icon_finder/services/ios%20_icons/services/ios_icon_service.dart';
 import 'package:ios_icon_finder/src/global/theme/app_color.dart';
-import 'package:ios_icon_finder/src/pages/fav_icons/fav_icons_page.dart';
-import 'package:ios_icon_finder/src/pages/home/components/body_component.dart';
-import 'package:ios_icon_finder/src/pages/home/components/title_component.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/error_ui.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/loading.dart';
+import 'package:ios_icon_finder/src/pages/mobile/fav_icons/fav_icons_page.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/components/body_component.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/components/title_component.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/error_ui.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/loading.dart';
 
 class HomePage extends HookConsumerWidget {
   const HomePage({super.key});

lib/src/pages/home/widgets/icon_card/icon_card.dart → lib/src/pages/mobile/home/widgets/icon_card/icon_card.dart

@@ -8,14 +8,15 @@ import 'package:ios_icon_finder/services/favorite_icons/models/fav_icon_model.da
 import 'package:ios_icon_finder/services/favorite_icons/services/fav_icon_service.dart';
 import 'package:ios_icon_finder/services/ios%20_icons/models/ios_icon_model.dart';
 import 'package:ios_icon_finder/src/global/util/show_snackbar.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/icon_card/ract_icon_btn.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/icon_card/icon_info.dart';
-import 'package:ios_icon_finder/src/pages/home/widgets/icon_card/icon_ui.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_card/ract_icon_btn.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_card/icon_info.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_card/icon_ui.dart';
 
 class IconCard extends ConsumerWidget {
-  const IconCard({super.key, required this.icon});
+  const IconCard({super.key, required this.icon, this.rightToActions = false});
 
   final IosIcon icon;
+  final bool rightToActions;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -27,9 +28,16 @@ class IconCard extends ConsumerWidget {
       backgroundColor: Colors.white,
       duration: Duration(milliseconds: 300),
       startActions: [
-        RactIconBtn(onPressed: () => onCopy(context), icon: CupertinoIcons.doc)
+        if (!rightToActions)
+          RactIconBtn(
+              onPressed: () => onCopy(context), icon: CupertinoIcons.doc)
       ],
       endActions: [
+        if (rightToActions)
+          RactIconBtn(
+            onPressed: () => onCopy(context),
+            icon: CupertinoIcons.doc,
+          ),
         RactIconBtn(
           icon: reactIcon,
           iconColor: isFav ? Colors.red : null,

lib/src/pages/home/widgets/icon_card/icon_info.dart → lib/src/pages/mobile/home/widgets/icon_card/icon_info.dart

@@ -12,15 +12,20 @@ class IconInfo extends StatelessWidget {
     return Expanded(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text(
             icon.iconName,
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
             style: body.copyWith(fontWeight: FontWeight.bold),
           ),
-          Text(icon.iconFont, style: bodySmall),
+          Text(
+            icon.iconFont,
+            style: bodySmall,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
         ],
       ),
     );

lib/src/pages/mobile/home/widgets/icon_card_web.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:ios_icon_finder/services/ios%20_icons/models/ios_icon_model.dart';
+import 'package:ios_icon_finder/src/global/theme/app_color.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_card/icon_info.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_card/icon_ui.dart';
+
+class IconCardWeb extends StatelessWidget {
+  const IconCardWeb({super.key, required this.icon});
+
+  final IosIcon icon;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 100,
+      height: 100,
+      padding: EdgeInsets.all(20),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          border: Border.all(color: bombay),
+          borderRadius: BorderRadius.circular(8)),
+      child: Column(
+        children: [
+          IconUI(icon: icon),
+          SizedBox(height: 8),
+          IconInfo(icon: icon),
+        ],
+      ),
+    );
+  }
+}

lib/src/pages/mobile/home/widgets/icon_list.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:ios_icon_finder/services/ios%20_icons/models/ios_icon_model.dart';
+import 'package:ios_icon_finder/services/ios%20_icons/services/ios_icon_service.dart';
+import 'package:ios_icon_finder/src/global/extensions/responsive_extension.dart';
+import 'package:ios_icon_finder/src/global/theme/app_color.dart';
+import 'package:ios_icon_finder/src/pages/mobile/home/widgets/icon_card/icon_card.dart';
+import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart';
+
+class IconList extends ConsumerWidget {
+  const IconList({super.key, required this.icons});
+
+  final List<IosIcon> icons;
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final size = MediaQuery.of(context).size;
+    final isMobile = size.width.isMobile;
+    int columnsCount = (size.width / 200).floor();
+    double aspectRatio = size.width / (columnsCount * 100);
+
+    return DecoratedBox(
+      decoration: BoxDecoration(borderRadius: BorderRadius.circular(100)),
+      child: LiquidPullToRefresh(
+        height: 60,
+        color: coconut,
+        animSpeedFactor: 2,
+        backgroundColor: mineShaft,
+        showChildOpacityTransition: false,
+        springAnimationDurationInMilliseconds: 800,
+        onRefresh: () => ref.refresh(iosIconServiceProvider.future),
+        child: isMobile
+            ? ListView.separated(
+                separatorBuilder: (_, __) => SizedBox(height: 8),
+                shrinkWrap: true,
+                itemCount: icons.length,
+                padding: EdgeInsets.symmetric(vertical: 10),
+                itemBuilder: (context, index) {
+                  IosIcon icon = icons[index];
+                  return IconCard(icon: icon);
+                },
+              )
+            : GridView.builder(
+                itemCount: icons.length,
+                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: columnsCount,
+                  childAspectRatio: aspectRatio,
+                  crossAxisSpacing: 8.0,
+                  mainAxisSpacing: 8.0,
+                ),
+                itemBuilder: (context, index) {
+                  IosIcon icon = icons[index];
+                  return IconCard(
+                    icon: icon,
+                    rightToActions: true,
+                  );
+                },
+              ),
+      ),
+    );
+  }
+}

web/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="ios_icon_finder">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>ios_icon_finder</title>
+  <link rel="manifest" href="manifest.json">
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    const serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
+</head>
+<body>
+  <script>
+    window.addEventListener('load', function(ev) {
+      // Download main.dart.js
+      _flutter.loader.loadEntrypoint({
+        serviceWorker: {
+          serviceWorkerVersion: serviceWorkerVersion,
+        },
+        onEntrypointLoaded: function(engineInitializer) {
+          engineInitializer.initializeEngine().then(function(appRunner) {
+            appRunner.runApp();
+          });
+        }
+      });
+    });
+  </script>
+</body>
+</html>