stack_board

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Stack Board é um pacote Flutter que permite aos usuários criar e manipular widgets empilháveis e editáveis. Ele permite que os componentes sejam sobrepostos, reordenados e modificados interativamente, tornando-o ideal para aplicações que exigem composição visual dinâmica. O pacote suporta várias plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, garantindo ampla compatibilidade. Projetado para fluxos criativos, é especialmente útil em aplicativos de desenho, pintura e assinaturas, onde os usuários precisam gerenciar múltiplos elementos sobrepostos com facilidade.

Casos de uso

Interfaces de design interativas
Ferramentas de assinatura digital
Aplicativos de desenho em camadas
Composição multimídia
Fluxos de trabalho de edição baseados em widgets

Principais recursos

Componentes empilháveis e reordenáveis
edição em tempo real de widgets
Suporte multiplataforma
Integração flexível de componentes
Gerenciamento de camadas interativo

Indicado para

Designers criando interfaces de usuário em camadas
Desenvolvedores criando ferramentas interativas de desenho
Aplicações que exigem edição em múltiplas camadas
Aplicativos educacionais ou criativos com componentes visuais
Usuários que precisam de arranjos personalizáveis de widgets

Considerações

Requer gerenciamento cuidadoso do estado para pilhas complexas
O desempenho pode variar com um grande número de widgets empilhados
Mais adequado para casos de uso de complexidade moderada
Pode ser necessário lógica personalizada para interações avançadas
Opções de estilização internas limitadas além do empilhamento básico

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Stack Board

A Flutter package of custom stack board.

Try it: Demo

1.使用 StackBoardController

import 'package:stack_board/stack_board.dart';

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

添加自适应文本

_boardController.add(
    const AdaptiveText(
        'Flutter Candies',
        tapToEdit: true,
        style: TextStyle(fontWeight: FontWeight.bold),
    ),
);

添加自适应图片

_boardController.add(
    StackBoardItem(
        child: Image.network('https://avatars.githubusercontent.com/u/47586449?s=200&v=4'),
    ),
);

添加画板

_boardController.add(
    const StackDrawing(
        caseStyle: CaseStyle(
            borderColor: Colors.grey,
            iconColor: Colors.white,
            boxAspectRatio: 1,
        ),
    ),
);

添加自定义item

1.继承自 StackItemContent 和 StackItem

class ColorContent extends StackItemContent {
  ColorContent({required this.color});

  Color color;

  @override
  Map<String, dynamic> toJson() {
    return <String, dynamic>{
      'color': color.value,
    };
  }
}

class ColorStackItem extends StackItem<ColorContent> {
  ColorStackItem({
    required Size size,
    String? id,
    Offset? offset,
    double? angle,
    StackItemStatus? status,
    ColorContent? content,
  }) : super(
          id: id,
          size: size,
          offset: offset,
          angle: angle,
          status: status,
          content: content,
        );

  @override
  ColorStackItem copyWith({
    Size? size,
    Offset? offset,
    double? angle,
    StackItemStatus? status,
    ColorContent? content,
  }) {
    return ColorStackItem(
      id: id, // <= must !!
      size: size ?? this.size,
      offset: offset ?? this.offset,
      angle: angle ?? this.angle,
      status: status ?? this.status,
      content: content ?? this.content,
    );
  }
}

2.使用controller添加

import 'dart:math' as math;

...

/// Add custom item
void _addCustomItem() {
    final Color color = Colors.primaries[Random().nextInt(Colors.primaries.length)];
    _boardController.addItem(
        ColorStackItem(
        size: const Size.square(100),
        content: ColorContent(color: color),
        ),
    );
}

3.使用customBuilder构建

StackBoard(
    controller: _boardController,
        /// 如果使用了继承于StackBoardItem的自定义item
        /// 使用这个接口进行重构
      customBuilder: (StackItem<StackItemContent> item) {
          if (...) {

           ...

          } else if (item is ColorStackItem) {
            return Container(
              width: item.size.width,
              height: item.size.height,
              color: item.content?.color,
            );
          }

          ...
        },
)

Buscar categorias, pacotes e repositórios

Instalar pacote