stack_board 0.0.7 stack_board: ^0.0.7 copied to clipboard
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.
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) {},
),
],
)