FlickTileBox class

Widget de fondo animado con grid de tiles parpadeantes.

Crea un sistema de mosaico animado donde cada tile tiene su propia velocidad de parpadeo, fase y rango de opacidad, generando un efecto orgánico y dinámico perfecto para fondos modernos.

Ideal para: fondos de pantallas de login, overlays decorativos, fondos de carga, efectos tipo matriz digital, y cualquier diseño que necesite un fondo animado sutil pero impactante.

Cómo funciona

  • Cada tile tiene velocidad única (minSpeed a maxSpeed).
  • La opacidad oscila entre minOpacity y maxOpacity usando una onda sinusoidal.
  • Cada tile tiene una fase aleatoria para que no parpadeen sincronizados.
  • El grid se centra automáticamente en el área disponible.

Anatomía del efecto

Grid 4x6 con spacing:
┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐
└─┘ └─┘ └─┘ └─┘ └─┘ └─┘  ← Cada tile parpadea independientemente
 ↑   ↑   ↑   ↑   ↑   ↑
fase velocidad opacidad únicos

┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐
└─┘ └─┘ └─┘ └─┘ └─┘ └─┘

┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐
└─┘ └─┘ └─┘ └─┘ └─┘ └─┘

┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐
└─┘ └─┘ └─┘ └─┘ └─┘ └─┘

Rendimiento

  • Optimizado con RepaintBoundary para aislar repaints.
  • shouldRepaint eficiente: solo compara el timestamp actual.
  • Recomendado: 50-150 tiles totales (rows × columns) en móviles.
  • Máximo: 500 tiles para mantener 60fps en la mayoría de dispositivos.

Buenas prácticas

  • Usa spacing entre 2-8px para mejor definición visual.
  • Mantén minOpacity bajo (0.05-0.15) para efectos sutiles.
  • Rango de velocidad recomendado: 0.2-0.8 para transiciones naturales.
  • Para efecto "matriz digital": muchos tiles pequeños, spacing reducido.
  • Para efecto "minimalista": pocos tiles grandes, spacing amplio.

Ejemplos

Ejemplo básico (fondo sutil)

FlickTileBox(
  rows: 12,
  columns: 8,
  spacing: 6,
  color: Colors.blue,
  minOpacity: 0.1,
  maxOpacity: 0.9,
  minSpeed: 0.3,
  maxSpeed: 0.8,
  borderRadius: 4,
)

Ejemplo matriz digital (efecto Matrix)

FlickTileBox(
  rows: 20,
  columns: 30,
  spacing: 2,
  color: Colors.green,
  minOpacity: 0.1,
  maxOpacity: 0.8,
  minSpeed: 0.25,
  maxSpeed: 0.75,
  borderRadius: 1,
  backgroundColor: Colors.black,
)

Ejemplo minimalista (tiles grandes)

FlickTileBox(
  rows: 4,
  columns: 6,
  spacing: 12,
  color: Colors.purple,
  minOpacity: 0.15,
  maxOpacity: 0.6,
  minSpeed: 0.2,
  maxSpeed: 0.5,
  borderRadius: 8,
  tileSize: 60,
)

Ejemplo con fondo personalizado

Container(
  height: 400,
  width: double.infinity,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(16),
    child: FlickTileBox(
      rows: 10,
      columns: 15,
      color: Colors.orange,
      backgroundColor: Colors.black87,
    ),
  ),
)

Ejemplo reproducible (con seed)

FlickTileBox(
  rows: 8,
  columns: 12,
  seed: 42, // Mismo patrón cada vez
  color: Colors.cyan,
)

Parámetros avanzados

  • seed: Útil para testing o cuando necesitas el mismo patrón siempre.
  • tileSize: Usa null (automático) para responsive design.
  • backgroundColor: Establece un fondo sólido antes de dibujar tiles.

Ver también: ParticleBox para efectos de partículas animadas.

Inheritance

Constructors

FlickTileBox({Key? key, int rows = 12, int columns = 8, double? tileSize, double spacing = 6, Color color = const Color(0xFF6EA8FE), double minOpacity = 0.08, double maxOpacity = 0.95, double minSpeed = 0.35, double maxSpeed = 0.9, double borderRadius = 4, int? seed, Color? backgroundColor})
const

Properties

backgroundColor → Color?
Color de fondo del canvas.
final
borderRadius → double
Radio de los bordes redondeados de cada tile.
final
color → Color
Color base de los tiles.
final
columns → int
Número de columnas en el grid.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
maxOpacity → double
Opacidad máxima de los tiles (0.0 - 1.0).
final
maxSpeed → double
Velocidad máxima de parpadeo.
final
minOpacity → double
Opacidad mínima de los tiles (0.0 - 1.0).
final
minSpeed → double
Velocidad mínima de parpadeo.
final
rows → int
Número de filas en el grid.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
seed → int?
Semilla para el generador de números aleatorios.
final
spacing → double
Espaciado entre tiles en píxeles.
final
tileSize → double?
Tamaño de cada tile en píxeles.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<FlickTileBox>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited