flutter_blockly 1.5.1

A Flutter Blockly visual programming editor. The Blockly library adds an editor to your app that represents coding concepts as interlocking blocks.

flutter_blockly

Click to see the screenshot

Change Log.

Usage

BlocklyOptions interface

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}) {
}

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;
  }
}

Web BlocklyEditorWidget

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();
  }
}

Example

flutter_blockly_example

License

MIT