Click to see the screenshot
Click to see the code
import 'package:flutter_blockly/flutter_blockly.dart';
// ...
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: BlocklyEditorWidget(
workspaceConfiguration: workspaceConfiguration,
initial: initial,
onInject: onInject,
onChange: onChange,
onDispose: onDispose,
onError: onError,
),
),
);
}
void onChange({xml, json, dart, js, lua, php, python}) {
}for it to work for web browsers, you must add
blockly.min.js in web/index.html
<!DOCTYPE html>
<html>
<head>
<!-- ...... -->
</head>
<body>
<!-- ...... -->
<!-- here -->
<script src='https://unpkg.com/blockly/blockly.min.js' defer></script>
<!-- code generation -->
<script src="https://unpkg.com/blockly/dart_compressed" defer></script>
<script src="https://unpkg.com/blockly/javascript_compressed" defer></script>
<script src="https://unpkg.com/blockly/lua_compressed" defer></script>
<script src="https://unpkg.com/blockly/php_compressed" defer></script>
<script src="https://unpkg.com/blockly/python_compressed" defer></script>
</body>
</html>or if you want to use additional methods, see how it's implemented here
IOS and Android BlocklyEditorWidget
Click to see the code
import 'package:flutter_blockly/flutter_blockly.dart';
import 'package:webview_flutter/webview_flutter.dart';
// ...
class _MyWidgetState extends State<MyWidgetState> {
late final BlocklyEditor editor;
@override
void initState() {
super.initState();
editor = BlocklyEditor(
workspaceConfiguration: widget.workspaceConfiguration,
initial: widget.initial,
onError: widget.onError,
onInject: widget.onInject,
onChange: widget.onChange,
onDispose: widget.onDispose,
);
// then you will have methods and WebViewController:
// editor.init();
// editor.dispose();
// editor.onMessage();
// editor.htmlRender();
// editor.updateToolboxConfig();
// editor.updateState();
// editor.postData();
// editor.runJS();
// editor.state();
// editor.code();
// editor.blocklyController;
}
}Click to see the code
import 'package:flutter_blockly/flutter_blockly.dart';
// ...
class _MyWidgetState extends State<MyWidgetState> {
late final BlocklyEditor editor;
@override
void initState() {
super.initState();
editor = BlocklyEditor(
workspaceConfiguration: widget.workspaceConfiguration,
initial: widget.initial,
onError: widget.onError,
onInject: widget.onInject,
onChange: widget.onChange,
onDispose: widget.onDispose,
);
// then you will have methods:
// editor.init();
// editor.dispose();
// editor.addJavaScriptChannel();
// editor.onMessage();
// editor.htmlRender();
// editor.updateToolboxConfig();
// editor.updateState();
// editor.postData();
// editor.runJS();
// editor.state();
// editor.code();
}
}