Update Flutter Web WebView Support

- Flutter Web now supports WebViews.
Codelessly · Feb 24, 2024 · e410379 · e410379
1 parent 0f9ebf7
commit e410379
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 39 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -68,15 +68,12 @@ List<Widget> blocks = [
   const BlockWrapper(NativePerformance()),
   const BlockWrapper(LearnFromDevelopers()),
   const BlockWrapper(WhoUsesFlutter()),
+  // Disabled codelab block for performance.
+  const ResponsiveVisibility(
+    hiddenConditions: [Condition.smallerThan(name: DESKTOP)],
+    child: BlockWrapper(FlutterCodelab()),
+  ),
   const BlockWrapper(FlutterNewsRow()),
   const BlockWrapper(InstallFlutter()),
   const Footer(),
 ];
-
-// Disabled codelab block for performance.
-//              ResponsiveVisibility(
-//                hiddenWhen: [Condition.smallerThan(name: DESKTOP)],
-//                child: ResponsiveConstraints(
-//                    constraintsWhen: blockWidthConstraints,
-//                    child: FlutterCodelab()),
-//              ),
diff --git a/lib/ui/blocks.dart b/lib/ui/blocks.dart
@@ -1,7 +1,6 @@
 import 'dart:ui' as ui;
 
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_website/components/components.dart';
@@ -1043,20 +1042,21 @@ class _LearnFromDevelopersState extends State<LearnFromDevelopers> {
               padding: const EdgeInsets.symmetric(horizontal: 25),
               child: AspectRatio(
                 aspectRatio: videoAspectRatio,
-                child: (kIsWeb)
-                    ? Image.asset(
-                        "assets/images/video_thumbnail_learn_from_developers.png",
-                        fit: BoxFit.contain)
-                    // TODO: Disable multiple embedded iframes to prevent flicker.
+                child: WebViewWidget(
+                  key: webViewKey,
+                  controller: WebViewController()
+                    ..loadRequest(Uri.parse(videoUrl)),
+                )
+                // TODO: Legacy WebView on Web workarounds.
+                // (kIsWeb)
+                //     ? Image.asset(
+                //         "assets/images/video_thumbnail_learn_from_developers.png",
+                //         fit: BoxFit.contain)
 //                HtmlElementView(
 //                        key: webViewKey,
 //                        viewType: webViewKey.toString(),
 //                      )
-                    : WebViewWidget(
-                        key: webViewKey,
-                        controller: WebViewController()
-                          ..loadRequest(Uri.parse(videoUrl)),
-                      ),
+                ,
               ),
             ),
           ),
@@ -1246,8 +1246,6 @@ class _FlutterCodelabState extends State<FlutterCodelab>
   final double videoAspectRatio = 1.75;
 
   late Map<String, Widget> codelabExamples;
-  // TODO: Breaks mobile builds. Official Flutter WebView plugin is working on Web support.
-  HtmlElementView? codelabHtmlElementView;
   UniqueKey webViewKey = UniqueKey();
 
   @override
@@ -1295,24 +1293,19 @@ class _FlutterCodelabState extends State<FlutterCodelab>
                   padding: const EdgeInsets.fromLTRB(25, 16, 25, 16),
                   child: AspectRatio(
                     aspectRatio: videoAspectRatio,
-                    child: (kIsWeb)
-                        ? Container(
-                            decoration: BoxDecoration(
-                              border: Border.all(
-                                  color: const Color(0xFFD3D3D3), width: 1),
-                              borderRadius:
-                                  const BorderRadius.all(Radius.circular(0)),
-                            ),
-                            child: HtmlElementView(
-                              key: webViewKey,
-                              viewType: codelabSelected,
-                            ),
-                          )
-                        : WebViewWidget(
-                            key: webViewKey,
-                            controller: WebViewController()
-                              ..loadRequest(Uri.parse(codelabUrlSelected)),
-                          ),
+                    child: Container(
+                      decoration: BoxDecoration(
+                        border: Border.all(
+                            color: const Color(0xFFD3D3D3), width: 1),
+                        borderRadius:
+                            const BorderRadius.all(Radius.circular(0)),
+                      ),
+                      child: WebViewWidget(
+                        key: webViewKey,
+                        controller: WebViewController()
+                          ..loadRequest(Uri.parse(codelabUrlSelected)),
+                      ),
+                    ),
                   ),
                 ),
               ),

diff --git a/pubspec.lock b/pubspec.lock
@@ -532,6 +532,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.10.0"
+  webview_flutter_web:
+    dependency: "direct main"
+    description:
+      name: webview_flutter_web
+      sha256: "7f7cb8cfe5a5dee3b55d660a367c00838be56540ccb4097e84601bb6cb354af3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.2+4"
   webview_flutter_wkwebview:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -14,6 +14,7 @@ dependencies:
   url_launcher: ^6.2.5
   video_player: ^2.8.2
   webview_flutter: ^4.7.0
+  webview_flutter_web: ^0.2.2+4
   universal_html: ^2.2.4
   google_fonts: ^6.1.0
   responsive_framework: