mobile-blockly / flutter_blockly

A Flutter Blockly visual programming editor.
MIT License
10 stars 3 forks source link

flutter_blockly

Built on Blockly StandWithUkraine
pub version

Click to see the screenshot ![Flutter Blockly editor](https://github-production-user-asset-6210df.s3.amazonaws.com/26460350/283968394-fdf46ed0-276b-4171-86fb-94f5d69940e4.png)

Change Log.

Usage

BlocklyOptions interface

Click to see the code ```dart 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}) { } ```

or if you want to use additional methods, see how it's implemented here

IOS and Android BlocklyEditorWidget

Click to see the code ```dart import 'package:flutter_blockly/flutter_blockly.dart'; import 'package:webview_flutter/webview_flutter.dart'; // ... class _MyWidgetState extends State { 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; } } ```

Web BlocklyEditorWidget

Click to see the code ```dart import 'package:flutter_blockly/flutter_blockly.dart'; // ... class _MyWidgetState extends State { 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(); } } ```

Example

flutter_blockly_example

License

MIT