Don’t Try to Load Code Dynamically in Your Flutter App. It’s Terrible

1// this code is currently AOT compiled the app
2return AppFlowyEditor(
3  editorState: editorState,
4  shortcutEvents: const [],
5  // this is an API that a developer can use to inject their plugin
6  customBuilders: {
7        // What we want is to we want to provide this at runtime...
8    'local_image': LocalImageNodeWidgetBuilder(),
9  },
10);

1@override
2void initState() {
3    super.initState();
4  // grab a list of plugins, maybe as a url, to query a server for the plugin code
5    plugins = database["plugins"].map((row) => row.plugin_name));
6}
7
8return AppFlowyEditor(
9      editorState: editorState,
10      shortcutEvents: const [],
11        customBuilders: {
12      // here we append the default plugins
13            ...defaultPlugins,
14      // suppose that we query the server for the code an load the plugins here asynchronously
15            ...plugins.map((name) => { name, OTAWidget(url: '<https://www.example.com/$version/$name>')})
16        }
17);

1import 'dart:mirrors';
2
3void main() {
4  // Define the new Dart code as a string
5  // this string can be loaded over the air
6  String newCode = """
7    void main() {
8      print("Hello, world!");
9    }
10  """;
11
12  // Use the `compileSource` function to compile the new code
13  LibraryMirror library = currentMirrorSystem().isolate.rootLibrary;
14  CompilationUnit compilationUnit = parseCompilationUnit(newCode);
15  library.define(new CompilationUnitMember(library, compilationUnit));
16
17  // Use the `invoke` function to execute the new code
18  MethodMirror mainMethod = library.declarations[new Symbol('main')];
19  InstanceMirror result = currentMirrorSystem().invoke(mainMethod, []);
20}

1ShortcutEvent insertDoubleDivider = ShortcutEvent(
2  key: 'insert_double_divider',
3  command: 'Equal',
4  handler: (editorState, event) {
5    int? selection = editorState.service.selectionService.currentSelection;
6    if (selection == null) {
7      return KeyEventResult.ignored;
8    }
9
10    final TextNode textNode = textNodes.whereType<TextNode>().first;
11    String text = textNode.toPlainText();
12    if (text.contains('==')) {
13            // insert double divider
14      return KeyEventResult.handled;
15    }
16    return KeyEventResult.ignored;
17  },
18);

1final TextNode textNode = textNodes.whereType<TextNode>().first;

1return KeyEventResult.handled;

1import 'package:flutter/material.dart';
2import 'package:appflowy_editor/appflowy_editor.dart';
3// etc. other imports here that would make the red squiggles go away
4
5ShortcutEvent insertDoubleDivider = ShortcutEvent(
6  key: 'insert_double_divider',
7  command: 'Equal',
8  handler: (editorState, event) {
9    int? selection = editorState.service.selectionService.currentSelection;
10    if (selection == null) {
11      return KeyEventResult.ignored;
12    }
13
14    final TextNode textNode = textNodes.whereType<TextNode>().first;
15    String text = textNode.toPlainText();
16    if (text.contains('==')) {
17            // insert double divider
18      return KeyEventResult.handled;
19    }
20    return KeyEventResult.ignored;
21  },
22);

1/// Available classes from Appflowy Editor and Flowy Infra that can be used
2/// to create a plugin for Appflowy.
3library flowy_plugin;
4
5export 'package:appflowy_editor/appflowy_editor.dart'
6    show
7        ActionMenuArena,
8        ActionMenuArenaMember,
9        ActionMenuItem,
10        ActionMenuItemWidget,
11        BulletedListTextNodeWidget,
12        ActionMenuOverlay,
13        SelectionGestureDetector,
14        SelectionGestureDetectorState,
15        ContextMenuItem,
16        ContextMenu,
17        Keybinding,
18        ActionMenuState,
19        ActionMenuWidget,
20        AppFlowyKeyboard,
21        AppFlowyKeyboardService,
22        AppFlowyRenderPlugin,
23        AppFlowyRenderPluginService,
24        AppFlowySelectionService,
25        AppFlowySelectionService,
26        ApplyOptions,
27        BuiltInTextWidget,
28        BulletedListPluginStyle,
29        BulletedListTextNodeWidget,
30        BulletedListTextNodeWidgetBuilder,
31        CheckboxNodeWidget,
32        CheckboxNodeWidgetBuilder,
33        CheckboxPluginStyle,
34        ColorOption,
35        ColorPicker,
36        CursorWidget,
37        CursorWidget,
38        DeleteOperation,
39        Delta,
40        Delta,
41        Document,
42        Document,
43        EditorEntryWidgetBuilder,
44        EditorNodeWidget,
45        EditorState,
46        EditorStyle,
47        FlowyRichText,
48        FlowyService,
49        FlowyService,
50        FlowyToolbar,
51        HeadingPluginStyle,
52        HeadingTextNodeWidget,
53        HeadingTextNodeWidgetBuilder,
54        HistoryItem,
55        ImageNodeBuilder,
56        ImageNodeWidget,
57        ImageNodeWidgetState,
58        ImageUploadMenu,
59        InsertOperation,
60        LinkMenu,
61        Node,
62        NodeIterator,
63        NodeWidgetBuilder,
64        NodeWidgetBuilder,
65        NodeWidgetContext,
66        NodeWidgetContext,
67        NumberListPluginStyle,
68        NumberListTextNodeWidget,
69        NumberListTextNodeWidgetBuilder,
70        Operation,
71        Position,
72        Position,
73        QuotedTextNodeWidget,
74        QuotedTextNodeWidgetBuilder,
75        QuotedTextPluginStyle,
76        RichTextNodeWidget,
77        RichTExtNodeWidgetBuilder,
78        Selection,
79        SelectionMenuItem,
80        SelectionMenuItem,
81        SelectionMenuItem,
82        SelectionMenuItem,
83        SelectionMenuItemWidget,
84        SelectionMenuService,
85        SelectionMenuWidget,
86        SelectionWidget,
87        ShortcutEvent,
88        TextDelete,
89        TextInsert,
90        TextNode,
91        TextOperation,
92        TextRetain,
93        ToolbarItem,
94        ToolbarItem,
95        ToolbarItemWidget,
96        ToolbarWidget,
97        Transaction,
98        Transaction,
99        UndoManager,
100        UpdateOperation,
101        UpdateTextOperation;
102export 'package:flowy_infra/theme.dart' show AppTheme;
103export 'package:flowy_infra/colorscheme/colorscheme.dart' show FlowyColorScheme;
104export 'src/flowy_plugin.dart' show FlowyPlugin;
105export 'src/plugin_service.dart' show FlowyPluginService;

1import 'package:flutter/material.dart';
2import 'package:flowy_plugin/flowy_plugin.dart';
3
4import 'dart:ui' as ui;
5
6const DoubleDividerType = 'horizontal_double_rule';
7
8class DoubleDividerWidgetBuilder extends NodeWidgetBuilder<Node> {
9  @override
10  Widget build(NodeWidgetContext<Node> context) {
11    return DoubleDividerWidget(
12      key: context.node.key,
13      node: context.node,
14      editorState: context.editorState,
15    );
16  }
17
18  @override
19  bool Function(Node) get nodeValidator => (node) {
20    return true;
21  };
22}
23
24class DoubleDividerWidget extends StatefulWidget {
25  const DoubleDividerWidget({
26    Key? key,
27    required this.node,
28    required this.editorState,
29  }) : super(key: key);
30
31  final Node node;
32  final EditorState editorState;
33
34  @override
35  State<DoubleDividerWidget> createState() => DoubleDividerWidgetState();
36}
37
38class DoubleDividerWidgetState extends State<DoubleDividerWidget> {
39  @override
40  Widget build(BuildContext context) {
41    return Container(
42      // padding: const EdgeInsets.symmetric(vertical: 5),
43      // width: MediaQuery.of(context).size.width,
44      height: 25,
45      child: CustomPaint(
46        painter: DoubleDividerPainter(),
47      ),
48    );
49  }
50}
51
52class DoubleDividerPainter extends CustomPainter {
53  @override
54  void paint(Canvas canvas, Size size) {
55    var paint = Paint();
56    paint.color = Colors.black;
57    paint.style = PaintingStyle.stroke;
58    paint.strokeWidth = 1.5;
59
60    var path = ui.Path();
61    path.moveTo(0, size.height-10);
62    path.lineTo(size.width, size.height-10);
63    path.moveTo(0, size.height-5);
64    path.lineTo(size.width, size.height -5);
65    canvas.drawPath(path, paint);
66  }
67
68  @override
69  bool shouldRepaint(CustomPainter oldDelegate) {
70    return true;
71  }
72}