flutter_logicblocks
所属分类:代码编辑器
开发工具:Dart
文件大小:73KB
下载次数:0
上传日期:2019-08-04 21:28:38
上 传 者:
sh-1993
说明: 用于创建可视化编程编辑器的基于Flutter的库
(Flutter based library for creating visual programming editors)
文件列表:
.metadata (309, 2019-08-05)
CHANGELOG.md (72, 2019-08-05)
LICENSE (1072, 2019-08-05)
imgs (0, 2019-08-05)
imgs\modern.png (58640, 2019-08-05)
lib (0, 2019-08-05)
lib\block.dart (902, 2019-08-05)
lib\block_canvas.dart (3349, 2019-08-05)
lib\block_target.dart (2909, 2019-08-05)
lib\draggable_block.dart (7164, 2019-08-05)
lib\fixed_block.dart (872, 2019-08-05)
lib\flutter_logicblocks.dart (165, 2019-08-05)
lib\flutter_logicblocks_modern.dart (255, 2019-08-05)
lib\modern (0, 2019-08-05)
lib\modern\block.dart (4407, 2019-08-05)
lib\modern\block_body.dart (11632, 2019-08-05)
lib\modern\block_helpers.dart (1890, 2019-08-05)
lib\modern\block_path.dart (3217, 2019-08-05)
lib\modern\canvas.dart (2260, 2019-08-05)
lib\modern\constants.dart (231, 2019-08-05)
lib\modern\theme.dart (735, 2019-08-05)
pubspec.lock (3107, 2019-08-05)
pubspec.yaml (1545, 2019-08-05)
# Flutter Logic Blocks
Flutter logic blocks is a library for creating visual programming editors. The core of the project is collection of helper widgets for handling input and rendering, which is then combined with one of the block styles below.
## Styles
### Modern
![](https://raw.githubusercontent.com/csnewman/flutter_logicblocks/master/imgs/modern.png)
Inspired by the [ScratchBlocks](https://github.com/LLK/scratch-blocks) project. The style is not exactly the same, and nor does it try to be.
Themed text fields and buttons are coming soon.
#### Canvas
```dart
ModernBlockCanvasContext(
userData: null, // User data that is automatically passed around
zoom: 1.0, // Currently broken due to some internal flutter issues, keep at 1.0
offset: Offset(0, 0), // Canvas pan offset
blockBuilder: _buildBlock, // See bellow
onBlockMoved: (block, pos) {
// Callback to handle when a block (given by its id) is moved to a position (canvas relative)
// You should store this state and use it for the root blocks
},
rootBlocksProvider: () {
// Called to get the list of blocks that need rendering
// If a block is a child of another, then it should not be returned here
var blocks = [];
/* blocks.add(RootBlock(
block: Some id,
position: Canvas relative position,
)); */
return blocks;
},
child: BlockCanvas(
background: BlockCanvasBackground(
onPan: (delta) {
// Callback to handle canvas pans
},
),
),
)
```
#### Block builder
```dart
Widget _buildBlock(BuildContext context, BlockContext blockContext) {
var userData = ModernBlockCanvasContext.getUserData* data type */>(context);
// Use blockContext.id to get state for this block from the userData
// State should store the block type
return /* A custom widget */;
}
```
#### Example widget
```dart
class ExampleBlockWidget extends StatelessWidget {
final String id;
final /* Some state type */ data;
final BlockRenderMode mode;
ExampleBlockWidget({
this.id,
this.data,
this.mode,
});
@override
Widget build(BuildContext context) {
var userData = ModernBlockCanvasContext.getUserData* userData type */>(context);
return ModernBlock(
isStartBlock: false, // Whether to have a notch or circle on top
theme: ModernBlockThemes.orange, // The color of the block background
nextBlock: data.nextChild, // The block to render after this block, as an id
nextBlockDropped: (id, pos) {
// Callback to handle when a new block is dropped onto the end of this block
return true;
},
nextBlockRemoved: () {
// Callback to handle when the following block is removed
},
elements: [
MaterialBlockContentElement(
content: Padding(
padding: const EdgeInsets.fromLTRB(0, 4, 58, 4),
child: Text("Example block"),
),
),
MaterialBlockChildBlockElement(
block: data.ifChild,
blockDropped: (id, pos) {
return true;
},
blockRemoved: () {
},
),
MaterialBlockContentElement(
content: Padding(
padding: const EdgeInsets.only(top: 4, bottom: 4),
),
),
MaterialBlockChildBlockElement(
block: data.elseChild,
blockDropped: (id, pos) {
return true;
},
blockRemoved: () {
}),
MaterialBlockContentElement(
content: Padding(
padding: const EdgeInsets.only(top: 4, bottom: 4),
),
),
],
);
}
}
```
### Modern (Horizontal)
Planned, however no set target.
### Material
Planned, however no set target.
### Retro
Coming soon.
## State
Flutter logic blocks makes no assumptions about what state framework you are using. The examples show off using [flutter_bloc](https://pub.dev/packages/flutter_bloc). However any standard state framework should work. If not, please open an issue and I can look at making the needed changes.
近期下载者:
相关文件:
收藏者: