Add support for HtmlWidgetState.scrollToAnchor (#577)

Related to #536

Author: daohoangson

demo_app/lib/screens/hello_world.dart

@@ -140,17 +140,49 @@ const kHtml = '''
 <br />
 ''';
 
+final globalKey = GlobalKey<HtmlWidgetState>();
+
 class HelloWorldScreen extends StatelessWidget {
   const HelloWorldScreen({Key key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) => Scaffold(
-        appBar: AppBar(title: const Text('HelloWorldScreen')),
+        appBar: AppBar(
+          title: const Text('HelloWorldScreen'),
+          actions: const [PopupMenu()],
+        ),
         body: SingleChildScrollView(
           child: Padding(
             padding: const EdgeInsets.all(8.0),
-            child: HtmlWidget(kHtml, webView: true),
+            child: HtmlWidget(kHtml, key: globalKey, webView: true),
           ),
         ),
       );
 }
+
+class PopupMenu extends StatelessWidget {
+  const PopupMenu({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return PopupMenuButton<_PopupMenuValue>(
+      onSelected: (value) {
+        switch (value) {
+          case _PopupMenuValue.scrollToTop:
+            globalKey.currentState?.scrollToAnchor('top');
+            break;
+        }
+      },
+      itemBuilder: (_) => const [
+        PopupMenuItem(
+          value: _PopupMenuValue.scrollToTop,
+          child: Text('Scroll to #top'),
+        ),
+      ],
+    );
+  }
+}
+
+enum _PopupMenuValue {
+  scrollToTop,
+}

demo_app/lib/screens/hello_world_core.dart

@@ -8,11 +8,14 @@ class HelloWorldCoreScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => Scaffold(
-        appBar: AppBar(title: const Text('HelloWorldCoreScreen')),
-        body: const SingleChildScrollView(
+        appBar: AppBar(
+          title: const Text('HelloWorldCoreScreen'),
+          actions: const [enhanced.PopupMenu()],
+        ),
+        body: SingleChildScrollView(
           child: Padding(
-            padding: EdgeInsets.all(8.0),
-            child: HtmlWidget(enhanced.kHtml),
+            padding: const EdgeInsets.all(8.0),
+            child: HtmlWidget(enhanced.kHtml, key: enhanced.globalKey),
           ),
         ),
       );

packages/core/lib/src/core_html_widget.dart

@@ -111,15 +111,17 @@ class HtmlWidget extends StatefulWidget {
         super(key: key);
 
   @override
-  State<HtmlWidget> createState() => _HtmlWidgetState();
+  State<HtmlWidget> createState() => HtmlWidgetState();
 }
 
-class _HtmlWidgetState extends State<HtmlWidget> {
+/// State for a [HtmlWidget].
+class HtmlWidgetState extends State<HtmlWidget> {
+  late final BuildMetadata _rootMeta;
+  late final _RootTsb _rootTsb;
+  late final WidgetFactory _wf;
+
   Widget? _cache;
   Future<Widget>? _future;
-  late BuildMetadata _rootMeta;
-  late _RootTsb _rootTsb;
-  late WidgetFactory _wf;
 
   bool get buildAsync =>
       widget.buildAsync ?? widget.html.length > kShouldBuildAsync;
@@ -201,6 +203,9 @@ class _HtmlWidgetState extends State<HtmlWidget> {
     return _tshWidget(_cache!);
   }
 
+  /// Scrolls to make sure the requested anchor is as visible as possible.
+  Future<bool> scrollToAnchor(String id) => _wf.onTapUrl('#$id');
+
   Future<Widget> _buildAsync() async {
     final domNodes = await compute(_parseHtml, widget.html);
 
@@ -234,7 +239,7 @@ class _HtmlWidgetState extends State<HtmlWidget> {
 class _RootTsb extends TextStyleBuilder {
   TextStyleHtml? _output;
 
-  _RootTsb(_HtmlWidgetState state) {
+  _RootTsb(HtmlWidgetState state) {
     enqueue(builder, state);
   }
 
@@ -244,7 +249,7 @@ class _RootTsb extends TextStyleBuilder {
     return super.build(context);
   }
 
-  TextStyleHtml builder(TextStyleHtml? _, _HtmlWidgetState state) {
+  TextStyleHtml builder(TextStyleHtml? _, HtmlWidgetState state) {
     if (_output != null) return _output!;
     return _output = TextStyleHtml.root(
       state._wf.getDependencies(state.context),
@@ -255,7 +260,7 @@ class _RootTsb extends TextStyleBuilder {
   void reset() => _output = null;
 }
 
-Widget _buildBody(_HtmlWidgetState state, dom.NodeList domNodes) {
+Widget _buildBody(HtmlWidgetState state, dom.NodeList domNodes) {
   final rootMeta = state._rootMeta;
   final wf = state._wf;
   wf.reset(state);

packages/core/test/anchor_test.dart

@@ -101,6 +101,19 @@ Future<void> main() async {
         expect(_onTapAnchorResults, equals({'target': true}));
       });
 
+      testWidgets('HtmlWidgetState.scrollToAnchor', (tester) async {
+        await tester.pumpWidgetBuilder(
+          const _ColumnTestApp(),
+          surfaceSize: const Size(200, 200),
+        );
+
+        final scrollFuture = globalKey.currentState?.scrollToAnchor('target');
+        await tester.pumpAndSettle();
+
+        expect(await scrollFuture, isTrue);
+        expect(_onTapAnchorResults, equals({'target': true}));
+      });
+
       testWidgets('ListView', (WidgetTester tester) async {
         await tester.pumpWidgetBuilder(
           const _ListViewTestApp(),
@@ -357,6 +370,8 @@ ${htmlDesc * 3}
 <a href="#target">Scroll up</a>
 ''';
 
+final globalKey = GlobalKey<HtmlWidgetState>();
+
 class _ColumnTestApp extends StatelessWidget {
   final String? html;
   final Key? keyBottom;
@@ -371,6 +386,7 @@ class _ColumnTestApp extends StatelessWidget {
               HtmlWidget(
                 html ?? htmlDefault,
                 factoryBuilder: () => _WidgetFactory(),
+                key: globalKey,
               ),
               SizedBox.shrink(key: keyBottom),
             ],

packages/enhanced/lib/src/html_widget.dart

@@ -8,6 +8,9 @@ import 'data.dart';
 import 'helpers.dart';
 import 'widget_factory.dart';
 
+export 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart'
+    show HtmlWidgetState;
+
 /// A widget that builds Flutter widget tree from HTML
 /// with support for IFRAME, VIDEO and many other tags.
 class HtmlWidget extends core.HtmlWidget {