A Flutter Blockly Visual Programming Editor

flutter_blockly

Click to see the screenshot

Change Log.

Usage

BlocklyOptions interface

Click to see the code

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

Click to see the code

Example

flutter_blockly_example

License

MIT

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_blockly

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_blockly: ^1.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_blockly/flutter_blockly.dart'; 

example/lib/main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_blockly/flutter_blockly.dart';

import 'content.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  final workspaceConfiguration = {
    'grid': {
      'spacing': 20,
      'length': 3,
      'colour': '#ccc',
      'snap': true,
    },
    'toolbox': initialToolboxJson,
  };

  void onInject(state) {
    debugPrint('onInject: ${state.xml}\n${jsonEncode(state.json)}');
  }

  void onChange(state) {
    debugPrint('onChange: ${state.xml}\n${jsonEncode(state.json)}');
  }

  void onDispose(state) {
    debugPrint('onDispose: ${state.xml}\n${jsonEncode(state.json)}');
  }

  void onError(dynamic err) {
    debugPrint('onError: $err');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: BlocklyEditorWidget(
          workspaceConfiguration: workspaceConfiguration,
          initial: initialJson,
          onInject: onInject,
          onChange: onChange,
          onDispose: onDispose,
          onError: onError,
        ),
      ),
    );
  }
} 

Download details:

Author: SerSerch

Source: https://github.com/SerSerch/flutter_blockly

#flutter #android #ios