feat: Added RouterComponent

doc/_sphinx/extensions/flutter_app.css

@@ -130,3 +130,30 @@ button.flutter-app-button:after {
   height: 350px;
   width: 100%;
 }
+
+.flutter-app-infobox {
+  background: #282828;
+  border: 1px solid #555555;
+  border-radius: 6px;
+  float: right;
+  margin-left: 6pt;
+  padding: 8px;
+  width: 280px;
+}
+
+.flutter-app-infobox button.flutter-app-iframe {
+  height: 400px;
+}
+
+.flutter-app-infobox button.flutter-app-button {
+  float: right;
+  font-size: 0.85em;
+  margin-bottom: 0;
+  margin-right: 0;
+  min-height: 14pt;
+  min-width: 50pt;
+}
+
+.flutter-app-infobox p:last-child {
+  margin-bottom: 0;
+}

doc/_sphinx/extensions/flutter_app.py

@@ -44,13 +44,16 @@ class FlutterAppDirective(SphinxDirective):
         with the matching name.
 
       :show: - a list of one or more run modes, which could include "widget",
-        "popup", and "code". Each of these modes produces a different output:
+        "popup", "code", and "infobox". Each of these modes produces a different
+        output:
           "widget" - an iframe shown directly inside the docs page;
           "popup" - a [Run] button which opens the app to (almost) fullscreen;
           "code" - a [Code] button which opens a popup with the code that was
               compiled.
+          "infobox" - the content will be displayed as an infobox floating on
+              the right-hand side of the page
     """
-    has_content = False
+    has_content = True
     required_arguments = 0
     optional_arguments = 0
     option_spec = {
@@ -103,14 +106,19 @@ def run(self):
                 classes=['flutter-app-button', 'code'],
                 onclick=f'open_code_listings("{code_id}")',
             ))
+        if 'infobox' in self.modes:
+            self.state.nested_parse(self.content, 0, result)
+            result = [
+                nodes.container('', *result, classes=['flutter-app-infobox'])
+            ]
         return result
 
     def _process_show_option(self):
         argument = self.options.get('show')
         if argument:
             values = argument.split()
             for value in values:
-                if value not in ['widget', 'popup', 'code']:
+                if value not in ['widget', 'popup', 'code', 'infobox']:
                     raise self.error('Invalid :show: value ' + value)
             self.modes = values
         else:
@@ -228,30 +236,23 @@ def _doc_root():
 # ------------------------------------------------------------------------------
 
 class IFrame(nodes.Element, nodes.General):
-    pass
+    def visit(self, node):
+        self.body.append(
+            self.starttag(node, 'iframe', src=node.attributes['src']))
 
-
-def visit_iframe(self, node):
-    self.body.append(self.starttag(node, 'iframe', src=node.attributes['src']))
-
-
-def depart_iframe(self, _):
-    self.body.append('</iframe>')
+    def depart(self, _):
+        self.body.append('</iframe>')
 
 
 class Button(nodes.Element, nodes.General):
-    pass
-
-
-def visit_button(self, node):
-    attrs = {}
-    if 'onclick' in node.attributes:
-        attrs['onclick'] = node.attributes['onclick']
-    self.body.append(self.starttag(node, 'button', **attrs).strip())
-
+    def visit(self, node):
+        attrs = {}
+        if 'onclick' in node.attributes:
+            attrs['onclick'] = node.attributes['onclick']
+        self.body.append(self.starttag(node, 'button', **attrs).strip())
 
-def depart_button(self, _):
-    self.body.append('</button>')
+    def depart(self, _):
+        self.body.append('</button>')
 
 
 # ------------------------------------------------------------------------------
@@ -265,8 +266,8 @@ def setup(app):
     shutil.copy(os.path.join(base_dir, 'flutter_app.js'), target_dir)
     shutil.copy(os.path.join(base_dir, 'flutter_app.css'), target_dir)
 
-    app.add_node(IFrame, html=(visit_iframe, depart_iframe))
-    app.add_node(Button, html=(visit_button, depart_button))
+    app.add_node(IFrame, html=(IFrame.visit, IFrame.depart))
+    app.add_node(Button, html=(Button.visit, Button.depart))
     app.add_directive('flutter-app', FlutterAppDirective)
     app.add_js_file('flutter_app.js')
     app.add_css_file('flutter_app.css')

doc/_sphinx/theme/flames.css

@@ -482,6 +482,12 @@ div.document {
   padding: var(--document-padding);
 }
 
+div.document::after { /* clearfix */
+  content: '';
+  display: block;
+  clear: both;
+}
+
 div.copyright {
   font-size: 12px;
   margin-top: 3px;

doc/flame/examples/lib/main.dart

@@ -1,6 +1,7 @@
 import 'dart:html'; // ignore: avoid_web_libraries_in_flutter
 
 import 'package:doc_flame_examples/drag_events.dart';
+import 'package:doc_flame_examples/navigator.dart';
 import 'package:doc_flame_examples/tap_events.dart';
 import 'package:flame/game.dart';
 import 'package:flutter/widgets.dart';
@@ -18,6 +19,9 @@ void main() {
     case 'drag_events':
       game = DragEventsGame();
       break;
+    case 'navigator':
+      game = NavigatorGame();
+      break;
   }
   if (game != null) {
     runApp(GameWidget(game: game));