graphx falling boxes (burn background)

box_data.dart

import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';

abstract class SampleData {
  static Future<void> cacheSvgData() async {
    for (var string in boxIcons) {
      final result = await SvgUtils.svgDataFromString(string);
      boxSvgs.add(result);
    }
  }

  static final boxSvgs = <SvgData>[];

  static final boxWords = [
    'Bug',
    'Testing',
    'Refactoring',
    'Tech Dept',
    'Code Review',
  ];
  static final boxIcons = [
    kSvg1,
    kSvg2,
    kSvg3,
    kSvg4,
    kSvg5,
    kSvg6,
  ];
  static final boxColors = [
    Color(0xff740133),
    Color(0xff785eea),
    Color(0xffffabb5),
    Color(0xfff7cd21),
    Color(0xffff4f01),
    Color(0xff03a5ff),
  ];
}

/// -- svg data
const kSvg1 = '''
<svg width="188" height="188" viewBox="0 0 188 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M126 94C126 102.487 122.629 110.626 116.627 116.627C110.626 122.629 102.487 126 94 126C85.5131 126 77.3738 122.629 71.3726 116.627C65.3714 110.626 62 102.487 62 94L94 94H126Z" fill="black"/>
</svg>
''';

const kSvg2 = '''
<svg width="188" height="188" viewBox="0 0 188 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M94 63L130 125.354L58 125.354L94 63Z" fill="black"/>
</svg>
''';

const kSvg3 = '''
<svg width="188" height="188" viewBox="0 0 188 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="69" cy="94" r="19" fill="black"/>
<circle cx="119" cy="94" r="19" fill="black"/>
</svg>
''';

const kSvg4 = '''
<svg width="188" height="188" viewBox="0 0 188 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50 94L94 61L138 94L94 127L50 94Z" fill="black"/>
</svg>
''';

const kSvg5 = '''
<svg width="188" height="188" viewBox="0 0 188 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M94 53L98.6116 75.29L113.054 57.6963L106.778 79.5762L127.742 70.7093L112.018 87.1668L134.701 89.058L113.13 96.3227L132.336 108.539L109.859 104.947L121.188 124.689L102.955 111.063L103.812 133.809L94 113.27L84.1881 133.809L85.0448 111.063L66.812 124.689L78.1411 104.947L55.6643 108.539L74.8705 96.3227L53.2989 89.058L75.9822 87.1668L60.2577 70.7093L81.2216 79.5762L74.9464 57.6963L89.3884 75.29L94 53Z" fill="black"/>
</svg>
''';
const kSvg6 = '''
<svg width="188" height="188" viewBox="0 0 188 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M94 63L130 125.354L58 125.354L94 63Z" fill="black"/>
</svg>
''';

main.dart

/// sample demo:
/// https://graphx-burn-boxes.surge.sh/
/// 
/// original idea: 
/// https://burn.manychat.team/en


import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';

import 'scene.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'graphx boxes',
      theme: ThemeData(fontFamily: 'Poppins'),
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('boxes'),
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: SceneBuilderWidget(
        builder: () => SceneController(back: BoxesScene()),
        autoSize: true,
      ),
    );
  }
}

pubspec.yaml

name: graphx_boxes
description: graphx sample

publish_to: "none"

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  graphx: ^1.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: false

### font from: https://fonts.google.com/specimen/Poppins?query=poppins
  fonts:
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins-Bold.ttf

scene.dart

import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';

import 'box_data.dart';
import 'scene_box.dart';

class BoxesScene extends GSprite {
  BoxesScene() {
    _cacheSvgs();
  }

  void _cacheSvgs() async {
    await SampleData.cacheSvgData();
  }

  double get sw => stage?.stageWidth ?? 0;

  double get sh => stage?.stageHeight ?? 0;
  late List<Box> boxes;

  @override
  Future<void> addedToStage() async {
    super.addedToStage();
    stage!.color = Color(0xff161930);
    boxes = List.generate(12, (index) {
      var box = Box();
      addChild(box);
      box.x = Math.randomRange(0, sw);
      box.y = Math.randomRange(-800, -200);
      return box;
    });
    stage!.onEnterFrame.add(onEnterFrame);
  }

  void onEnterFrame(e) {
    for (var box in boxes) {
      box.move();
      if (box.y > sh + box.size) {
        box.y = Math.randomRange(-box.size, -box.size * 2);
        box.x = Math.randomRange(0, sw);
        box.reset();
      }
    }
  }
}

scene_box.dart

import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';

import 'box_data.dart';

class Box extends GSprite {
  late double vy, vr;
  late GSvgShape icon;
  late GText label;
  double size = 190;

  @override
  void addedToStage() {
    icon = GSvgShape(null);
    addChild(icon);

    /// text
    label = GText(
      text: '',
      textStyle: TextStyle(
        fontFamily: 'Poppins',
        fontSize: 9,
        letterSpacing: 0,
        color: Colors.black,
      ),
    );
    addChild(label);
    label.setPosition(10, 10);
    reset();
  }

  void move() {
    rotation += vr;
    y += vy;
    /// maybe for performance, dont draw if its not visible on the window.
    if (stage != null && parent!=null) {
      visible = stage!.stageRect.intersects(getBounds(parent)!);
    }
  }

  void reset() {
    /// update speed.
    vy = Math.randomRange(.4, 4.2);
    vr = Math.randomRange(-.008, .008);

    /// update color
    final color = Math.randomList(SampleData.boxColors);
    graphics
        .clear()
        .beginFill(color)
        .drawRoundRect(0, 0, size, size, 8)
        .endFill();

    /// update icon
    icon.data = Math.randomList(SampleData.boxSvgs);
    icon.alignPivot();
    icon.setPosition(size / 2, size / 2);

    /// update text.
    label.text = Math.randomList(SampleData.boxWords);
    alignPivot();
  }
}