stack_board 0.0.1 copy "stack_board: ^0.0.1" to clipboard
stack_board: ^0.0.1 copied to clipboard

outdated

Components that can be stacked and edited for any Widget

stack_board #

A Flutter package of custom stack board.

1.使用 StackBoardController #

import 'package:stack_board/stack_board.dart';

StackBoard(
    controller: _boardController,
    ///添加背景
    background: const ColoredBox(color: Colors.grey),
),

添加自适应图片

_boardController.add(
    const AdaptiveImage(
        'https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup.png',
    ),
);

添加自适应文本

_boardController.add(const AdaptiveText('自适应文本'));

添加画板

_boardController.add(const StackDrawing());

添加自定义Widget

_boardController.add(
    StackBoardItem(
        child: const Text('Custom Widget', style: TextStyle(color: Colors.white)),
    ),
);

添加自定义item #

1.继承自StackBoardItem

///自定义类型 Custom item type
class CustomItem extends StackBoardItem {
  const CustomItem({
    Future<bool> Function()? onDel,
    int? id, // <==== must
  }) : super(
          child: const Text('CustomItem'),
          onDel: onDel,
          id: id, // <==== must
        );

  @override // <==== must
  CustomItem copyWith({
    CaseStyle? caseStyle,
    Widget? child,
    int? id,
    Future<bool> Function()? onDel,
    dynamic Function(bool)? onEdit,
  }) =>
      CustomItem(onDel: onDel, id: id);
}

2.使用controller添加

_boardController.add<CustomItem>(const CustomItem());

3.使用customBuilder构建

StackBoard(
    controller: _boardController,
    ///如果使用了继承于StackBoardItem的自定义item
    ///使用这个接口进行重构
    customBuilder: (StackBoardItem t) {
        if (t is CustomItem) {
            return ItemCase(
                key: Key('CustomStackItem${t.id}'), // <==== must
                isCenter: false,
                onDel: () async => _boardController.remove(t.id),
                child: Container(width: 100, height: 100, color: Colors.blue),
            );
        }
    },
)

2.使用ItemCase进行完全自定义 #

Stack(
    children: <Widget>[
        ItemCase(
            isCenter: false,
            child: const Text('Custom case'),
            onDel: () async {},
            onEdit: (bool isEditing) {},
            onOffsetChanged: (Offset offset) {},
            onSizeChanged: (Size size) {},
        ),
    ],
)

效果预览 #

预览网址:https://stack.liugl.cn

70
likes
0
pub points
81%
popularity

Publisher

verified publisherfluttercandies.com

Components that can be stacked and edited for any Widget

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter, flutter_drawing_board

More

Packages that depend on stack_board