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

outdated

A Flutter package of stack board, components that can be stacked and edited for any widget.

Stack Board #

A Flutter package of custom stack board.

pub package GitHub stars GitHub forks CodeFactor FlutterCandies

1.使用 StackBoardController #

import 'package:stack_board/stack_board.dart';

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

添加自适应图片

_boardController.add(
    StackBoardItem(
        child: Image.network(
            'https://files.flutter-io.cn/images/branding/flutterlogo/flutter-cn-logo.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,
  }) =>
      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 {},
            onOffsetChanged: (Offset offset) {},
            onSizeChanged: (Size size) {},
        ),
    ],
)

效果预览 #

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

70
likes
0
pub points
81%
popularity

Publisher

verified publisherfluttercandies.com

A Flutter package of stack board, components that can be stacked and edited for any widget.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter, flutter_drawing_board, meta

More

Packages that depend on stack_board