Create Web Demo

*Import Responsive Framework for web support.

Author: rayliverified

example/lib/main.dart

@@ -1,9 +1,11 @@
 import 'dart:ui';
 
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:loading_gifs/loading_gifs.dart';
+import 'package:responsive_framework/responsive_framework.dart';
 
 void main() => runApp(MyApp());
 
@@ -12,59 +14,66 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return CupertinoApp(
       title: 'Loading GIFS',
+      builder: (context, widget) => ResponsiveWrapper.builder(widget,
+          maxWidth: 1200,
+          minWidth: 450,
+          defaultScale: true,
+          breakpoints: [
+            ResponsiveBreakpoint(breakpoint: 450, name: MOBILE),
+          ],
+          background: Container(color: Color(0xFFF5F5F5))),
       home: CupertinoPageScaffold(
-          child: Material(
-        child: CustomScrollView(
-          slivers: <Widget>[
-            CupertinoSliverNavigationBar(
-              largeTitle: Text(
-                "Loading GIFs",
-                style: TextStyle(color: Color(0xFF1C1C1E)),
-              ),
-              backgroundColor: Colors.transparent,
-              border: Border.all(style: BorderStyle.none),
-              automaticallyImplyLeading: false,
+          child: CustomScrollView(
+        shrinkWrap: true,
+        slivers: <Widget>[
+          CupertinoSliverNavigationBar(
+            largeTitle: Text(
+              "Loading GIFs",
+              style: TextStyle(color: Color(0xFF1C1C1E)),
             ),
-            SliverList(
-              delegate: SliverChildListDelegate.fixed(<Widget>[
-                subHeaderText("Cupertino", subtitle: "iOS"),
-                SingleChildScrollView(
-                  scrollDirection: Axis.horizontal,
-                  child: Padding(
-                    padding: EdgeInsets.fromLTRB(6, 0, 6, 0),
-                    child: Row(
-                      children: <Widget>[
-                        for (double i = 1; i <= 10; i++)
-                          ShowcaseCard(
-                            child: Image.asset(cupertinoActivityIndicator,
-                                scale: i),
-                            label: "Size ${i.round()}",
-                          ),
-                      ],
-                    ),
+            backgroundColor: Colors.transparent,
+            border: Border.all(style: BorderStyle.none),
+            automaticallyImplyLeading: false,
+          ),
+          SliverList(
+            delegate: SliverChildListDelegate.fixed(<Widget>[
+              subHeaderText("Cupertino", subtitle: "iOS"),
+              SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                child: Padding(
+                  padding: EdgeInsets.fromLTRB(6, 0, 6, 0),
+                  child: Row(
+                    children: <Widget>[
+                      for (double i = 1; i <= 10; i++)
+                        ShowcaseCard(
+                          child:
+                              Image.asset(cupertinoActivityIndicator, scale: i),
+                          label: "Size ${i.round()}",
+                        ),
+                    ],
                   ),
                 ),
-                subHeaderText("Material", subtitle: "Android"),
-                SingleChildScrollView(
-                  scrollDirection: Axis.horizontal,
-                  child: Padding(
-                    padding: EdgeInsets.fromLTRB(6, 0, 6, 8),
-                    child: Row(
-                      children: <Widget>[
-                        for (double i = 1; i <= 10; i++)
-                          ShowcaseCard(
-                            child: Image.asset(circularProgressIndicator,
-                                scale: i),
-                            label: "Size ${i.round()}",
-                          ),
-                      ],
-                    ),
+              ),
+              subHeaderText("Material", subtitle: "Android"),
+              SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                child: Padding(
+                  padding: EdgeInsets.fromLTRB(6, 0, 6, 8),
+                  child: Row(
+                    children: <Widget>[
+                      for (double i = 1; i <= 10; i++)
+                        ShowcaseCard(
+                          child:
+                              Image.asset(circularProgressIndicator, scale: i),
+                          label: "Size ${i.round()}",
+                        ),
+                    ],
                   ),
                 ),
-              ]),
-            ),
-          ],
-        ),
+              ),
+            ]),
+          ),
+        ],
       )),
       debugShowCheckedModeBanner: false,
     );
@@ -134,10 +143,12 @@ class ShowcaseCard extends StatelessWidget {
           ),
         Card(
           margin: EdgeInsets.fromLTRB(12, 4, 12, 24),
-          elevation: 12,
+          elevation: kIsWeb ? 8 : 10,
           shape:
-              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-          shadowColor: Colors.black45,
+              RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+          shadowColor: kIsWeb
+              ? Color.fromARGB(72, 178, 178, 178)
+              : Color.fromARGB(156, 178, 178, 178),
           child: Container(
             width: width,
             height: width,
@@ -151,9 +162,9 @@ class ShowcaseCard extends StatelessWidget {
                     bottom: 0,
                     child: ClipRRect(
                       borderRadius:
-                          BorderRadius.vertical(bottom: Radius.circular(10)),
+                          BorderRadius.vertical(bottom: Radius.circular(12)),
                       child: BackdropFilter(
-                        filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
+                        filter: ImageFilter.blur(sigmaX: 1, sigmaY: 1),
                         child: Container(
                           width: width,
                           height: 30,

example/pubspec.yaml

@@ -10,9 +10,19 @@ dependencies:
     sdk: flutter
   loading_gifs:
     path: ../
+  responsive_framework: ^0.0.4
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
+  flutter_launcher_icons: ^0.7.4
+
+flutter_icons:
+  android: true
+  ios: true
+  image_path_android: "assets/Loading-GIFs-Logo.png"
+  image_path_ios: "assets/Loading-GIFs-Logo-iOS.png"
+  adaptive_icon_background: "#FFFFFFFF"
+  adaptive_icon_foreground: "assets/Loading-GIFs-Logo-Adaptive.png"
 
 flutter: