EEffects

Flutter package providing a variety of effects:

Point Lights
Light Beams
Fire
Lightning bolts

Documentation is below Examples

Examples

Simple example how this package can light up your app/website

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

class MyApp extends StatelessWidget {
  EScene? scene;

  MyApp() {
    scene = EScene(
      width: 0,
      height: 0,
      effects: [
        ERadialLight(
            ERelativePos(0.3, 0.1),
            ERelative(100, ERelative.absolute),
            EGradient([
              EColorShift([Color.fromARGB(150, 255, 255, 255)], 0)
            ]),
            0,
            0,
            ERelative(30, ERelative.absolute),
            ERelative(2, ERelative.absolute),
            0.1,
            1),
        ELightBeam(
            ERelativePos(0.5, 0.5),
            EVector2D(1, 0),
            ERelative(0.6, ERelative.widthAndHeightRelative),
            ERelative(10, ERelative.absolute),
            ERelative(0, ERelative.absolute),
            EGradient([
              EColorShift([Color.fromARGB(150, 255, 255, 255)], 0),
            ]),
            1,
            0,
            ERelative(100, ERelative.absolute),
            ERelative(2, ERelative.absolute),
            0.1,
            1,
            name: "Example Beam")
      ],
      darkness: EColorShift([Color.fromARGB(255, 0, 0, 0)], 0),
      afterUpdate: () {
        EEffect effect = scene!.getEffect("Example Beam")!;
        if (effect is ELightBeam) {
          ELightBeam ourLightBeam = effect;
          //equivalent to mousePos - ourLightBeam.direction
          EVector2D newDirection = mousePos.getAdd(ourLightBeam.position
              .getAbsolutePair(Size(scene!.width, scene!.height))
              .getMultiply(-1));
          ourLightBeam.direction = newDirection;
        }
      },
      beforeUpdate: () {},
    );
  }

  EVector2D mousePos = EVector2D(0, 0);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(body: LayoutBuilder(builder: (context, size) {
      scene!.resize(size.biggest.width, size.biggest.height);
      return MouseRegion(
        child: Stack(
          children: [
            Container(
              width: 600,
              height: 100,
              color: Colors.pink,
            ),
            Positioned(
                width: 200,
                height: 200,
                top: 800,
                left: 100,
                child: Container(
                  color: Colors.red,
                )),
            Positioned(
                width: 400,
                height: 400,
                top: 800,
                left: 800,
                child: Container(
                  color: Colors.blue,
                )),
            Positioned(
                width: 300,
                height: 300,
                top: 200,
                left: 1700,
                child: Container(color: Colors.black)),
            Container(
              child: scene,
            )
          ],
        ),
        onHover: (PointerHoverEvent pointerHoverEvent) {
          mousePos = EVector2D(
              pointerHoverEvent.position.dx, pointerHoverEvent.position.dy);
        },
      );
    })));
  }
}

Make a Light Beam that follows your mouse and changes colors

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

class MyApp extends StatelessWidget {
  EScene? scene;

  MyApp() {
    scene = EScene(
      width: 0,
      height: 0,
      effects: [
        ELightBeam(
            ERelativePos(0.5, 0.5),
            EVector2D(1, 0),
            ERelative(0.5, ERelative.widthAndHeightRelative),
            ERelative(10, ERelative.absolute),
            ERelative(0, ERelative.absolute),
            EGradient([
              EColorShift([Colors.red, Colors.blue], 0.01),
              EColorShift([Colors.blue, Colors.red], 0.01)
            ]),
            1,
            0,
            ERelative(100, ERelative.absolute),
            ERelative(2, ERelative.absolute),
            0.1,
            1,
            name: "Example Beam")
      ],
      darkness: EColorShift([Color.fromARGB(255, 0, 0, 0)], 0),
      afterUpdate: () {
        EEffect effect = scene!.getEffect("Example Beam")!;
        if (effect is ELightBeam) {
          ELightBeam ourLightBeam = effect;
          //equivalent to mousePos - ourLightBeam.direction
          EVector2D newDirection = mousePos.getAdd(ourLightBeam.position
              .getAbsolutePair(Size(scene!.width, scene!.height))
              .getMultiply(-1));
          ourLightBeam.direction = newDirection;
        }
      },
      beforeUpdate: () {},
    );
  }

  EVector2D mousePos = EVector2D(0, 0);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(body: LayoutBuilder(builder: (context, size) {
      scene!.resize(size.biggest.width, size.biggest.height);
      return MouseRegion(
        child: scene,
        onHover: (PointerHoverEvent pointerHoverEvent) {
          mousePos = EVector2D(
              pointerHoverEvent.position.dx, pointerHoverEvent.position.dy);
        },
      );
    })));
  }
}

A Flame

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

class MyApp extends StatelessWidget {
  EScene? scene;

  MyApp() {
    scene = EScene(
      width: 0,
      height: 0,
      effects: [
        EFire(
            EGradient([
              EColorShift([Colors.red], 0),
              EColorShift([Colors.orange.shade800], 0),
              EColorShift([Colors.orange.shade600], 0)
            ]),
            EGradient([
              EColorShift([Color.fromARGB(10, 100, 100, 100)], 0)
            ]),
            EGradient([
              EColorShift([Color.fromARGB(20, 140, 100, 60)], 0),
              EColorShift([Color.fromARGB(10, 140, 100, 60)], 0)
            ]),
            1,
            0,
            ERelativePos(0.5, 0.5),
            EVector2D(0, -1),
            ERelative(30, ERelative.absolute),
            ERelative(40, ERelative.absolute),
            ERelative(2, ERelative.absolute),
            ERelative(40, ERelative.absolute),
            ERelative(150, ERelative.absolute),
            ERelative(8, ERelative.absolute)),
      ],
      darkness: EColorShift([Color.fromARGB(255, 0, 0, 0)], 0),
      afterUpdate: () {},
      beforeUpdate: () {},
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(body: LayoutBuilder(builder: (context, size) {
      scene!.resize(size.biggest.width, size.biggest.height);
      return Container(
        child: scene,
      );
    })));
  }
}

Or make a lightning that strikes where you click note that the number of points is very high you might experience lag on a slow device just turn that number a little bit down and you should be fine

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

class MyApp extends StatelessWidget {
  EScene? scene;

  MyApp() {
    scene = EScene(
      width: 0,
      height: 0,
      effects: [
        ELightning(
            ERelativePos(0.5, 0),
            0.02,
            ERelative(1, ERelative.absolute),
            ERelative(20, ERelative.absolute),
            ERelative(600, ERelative.absolute),
            50,
            5,
            EColorShift([Color.fromARGB(255, 80, 0, 255)], 0),
            true,
            8,
            1,
            name: "Example Lightning"),
      ],
      darkness: EColorShift([Color.fromARGB(255, 0, 0, 0)], 0),
      afterUpdate: () {},
      beforeUpdate: () {},
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(body: LayoutBuilder(builder: (context, size) {
      scene!.resize(size.biggest.width, size.biggest.height);
      return GestureDetector(
        child: scene,
        onTapDown: (TapDownDetails tapDownDetails) {
          EEffect effect = scene!.getEffect("Example Lightning")!;
          if (effect is ELightning) {
            ELightning ourLightning = effect;
            ourLightning.buildLightningOnNextTickATTarget(ERelativePair(
                ERelative(tapDownDetails.globalPosition.dx, ERelative.absolute),
                ERelative(
                    tapDownDetails.globalPosition.dy, ERelative.absolute)));

            ourLightning.fireLightningIn(1);
          }
        },
      );
    })));
  }
}

Documentation

EVector2D

Implementation of simple 2D vectors.

Constructors:

EVector2D(double x, double y)

Variables:

Methods:

norm() -> void sets the length of the vector to 1
add(EVector2D vct) -> void adds another vector to this one by adding their values
getAdd(EVector2D vct) -> EVector2D returns an EVector2D containing the values of this vector after adding vct
multiply(double value) -> void multiplies this vector by multiplying x and y with value
getMultiply(double value) -> EVector2D returns an EVector2D containing the values of this vector multiplied with value
rotate(double angle) -> void rotates the vector by the given angle in degrees
getRotate(double angle) -> EVector2D returns an EVector2D that is equivalent to this one but rotated by the given angle in degrees
getLength() -> double returns the length of this vector
getAngle(EVector2D vct) -> double returns the angle between this vector and vct in radians
setLength(double value) -> void set the length of this vector to value
getOffset() -> Offset returns the offset containing the values of the vector

ERelative

holds a value that is relative to the length of an EVector2D represented by an angle: relativeDependent length of this EVector2D is the maximum length that this vector can have while still being within the scene an angle of 0 is represented as EVector2D(1,0) => relative to width

Constructors:

ERelative(double relative, double relativeDependent) relativeDependent can be any value bigger than 0 and smaller than 179 or -1 if relativeDependent is bigger than 0 and smaller than 179, relative is relative to the EVector2D represented by this angle an angle of 90 represents the EVector2D(0,1) and the value is relative to the height if relativeDependent is -1, relative is absolute and getAbsoluteValue will just return relative so if relativeDependent is 90 and relative is 0.5, the absolute value will be half the height

Variables:

relative
relativeDependent

Pre-defined Values:

ERelative.widthRelative = 0
ERelative.heightRelative = 90
ERelative.widthAndHeightRelative = 45
ERelative.absolute = -1

Methods:

getAbsoluteValue(Size size) -> double returns the absolute value

ERelativePair

Contains 2 ERelative

Constructors:

ERelativePair(ERelative firstRelative, ERelative secondRelative)

Variables:

ERelative firstRelative
ERelative secondRelative

Methods:

set setFirstRelativeValue(double value) sets the relative of firstRelative
get getFirstRelativeValue -> double returns the relative of firstRelative
set setSecondRelativeValue(double value) sets the relative of secondRelative
get getSecondRelativeValue -> double returns the relative of secondRelative
getAbsolutePair(Size size) -> EVector2D returns the absolutes of the two ERelatives stored in an EVector2D

ERelativePos

Subclass of ERelativePair relativeDependent of first ERelative is set to ERelative.widthRelative relativeDependent of second ERelative is set to ERelative.heightRelative =>first value is always relative to width and second to height =>positional relative

Constructors:

ERelativePos(double firstRelativeValue, double secondRelativeValue)

EColorShift

List of colors where the current color changes current color moves linear from one color to the one that follows in the list if last color is reached next color is the one in the beginning with a shiftSpeed of 1, the current Color jumps in 1 tick from one color to the next one

Constructors:

EColorShift(List colors, double shiftSpeed)

Variables:

List colors
double shiftSpeed
double currentShift
Color currentColor

Methods:

update(double deltaTime) -> void updates all values
buildColor() -> void assigns the current Color to currentColor
getCurrentColor -> Color returns currentColor

EGradient

Custom gradient with ColorShifts instead of colors can return a RadialGradient or a LinearGradient

Constructors:

EGradient(List colorShifts)

Variables:

List colorShifts

Methods:

update(double deltaTime) -> void updates the EGradient
getRadialGradient() -> RadialGradient returns a RadialGradient
getLinearGradient(Alignment begin, Alignment end) -> LinearGradient returns a LinearGradient

EEffect

Constructors:

EEffect(double isDrawable, double updateFromScene, {String name = ""})

Variables:

String name name of the EEffect
bool isToggled = false if Effect is toggled it won't be drawn

Methods:

update(double deltaTime, Size size) -> void
draw(Canvas canvas, Size size) -> void
drawEffect(Canvas canvas, Size size) -> void
drawLight(Canvas canvas, Size size) -> void
toggle() -> void changes isToggled

ELight

Subclass of EEffect

Constructors:

ELight (double flickerOn, double flickerOff, ERelative blur, ERelative blurPulseRange,double blurPulseSpeed,{String name = ""})

Variables:

ERelative blur blur value
double _currentBlur = 0
double _newBlur = 0 new blur value that currentBlur will change to
ERelative blurPulseRange currentBlur will change linear to random values within blur-blurPulseRange,blur+blurPulseRange
double blurPulseSpeed value between 0 and 1. If blurPulseSpeed is one, currentBlur will change in one tick to newBlur
double flickerOn chance that light will turn on when off. Value between 0 and 1. 1 is equal to 100% and 0 to 0%
double flickerOff chance that light will turn off when on. Value between 0 and 1. 1 is equal to 100% and 0 to 0%

Methods:

get currentBlur() -> double returns the current blur
update(double deltaTime, Size size) -> void

ERadialLight

Simple point light. Subclass of ELight

Constructors:

ERadialLight(ERelativePair position, ERelative radius, EGradient gradient, double flickerOn, double flickerOff, ERelative blur, ERelative blurPulseRange, double blurPulseSpeed, int repainter, {String name = ""})

Variables:

ERelativePair position
ERelative radius
EGradient gradient
int repainter how often the light will be painted

ELightBeam

Constructors:

ELightBeam(ERelativePair position, EVector2D direction, ERelative length, ERelative angle, ERelative startPositionDist, EGradient gradient, double flickerOn, double flickerOff, ERelative blur, ERelative blurPulseRange, double blurPulseSpeed, int repainter, {String name = ""})

Variables:

ERelativePair position
EVector2D direction
ERelative length
ERelative angle
EGradient gradient
ERelative startPositionDist how wide the light beam is at the start position position
int repainter how often the light will be painted

EFire

Subclass of EEffect

Constructors:

EFire( EGradient fireGradient, EGradient smokeGradient, EGradient lightGradient, int fireParticlesPerTick, int smokeParticlesPerTick, ERelativePair startPoint, EVector2D flameDirection, ERelative scatteringAngle, ERelative startSize, ERelative decreaseSize, ERelative glow, ERelative lightRadius, ERelative particleSpeed, {String name = ""})

Variables:

EGradient fireGradient
EGradient smokeGradient
EGradient lightGradient
int fireParticlesPerTick fire particles that spawn per tick
int smokeParticlesPerTick smoke particles that spawn per tick
ERelativePair startPoint
EVector2D flameDirection
ERelative scatteringAngle max difference bewtween particleDirection and flameDirection
ERelative startSize start size of particles
ERelative decreaseSize value that particles shrink per tick
ERelative particleSpeed
ERelative glow
ERelative lightRadius

ELightning

Subclass of EEffect

Constructors:

ELightning( ERelativePair position, double spread, ERelative glow, ERelative width, ERelative curve, int numberOfPoints, double buildingTimeInTicks, EColorShift color, bool throwsLight, double lightningBlur, int repainter, {String name = ""})

Variables:

ERelativePair position
double spread value between 0 and 1. Chance that a sub lightning will appear on a point values below 0.08 are recommended
ERelative glow
ERelative width width of the lightning
ERelative curve curve value of the lightning this is the max width that the whole lightning can have for a lot of points absolute values above 400 are recommended
int numberOfPoints number of points the lightning will have more points results in a better look but also in less fps
double buildingTimeInTicks time that the lightning will take to build itself from position to its destination it will take the same time to erase itself
EColorShift color
bool throwsLight
double lightningBlur
int repainter how often the lightning should be painted

Methods:

buildLightningOnNextTickATTarget(ERelativePair targetPosition) -> void will build the lightning bold and make all the preparation for drawing it
fireLightningIn(double ticks) -> void will actually make the lightning appear in ticks ticks if you call fireLightningIn(1) the lightning will appear on the next tick if you call fireLightningIn(0) nothing will happen

EScene

Constructors:

EScene({ required double width, required double height, EColorShift? _darkness, List? effects, Function()? beforeUpdate, Function()? afterUpdate })

Variables:

double _width = 0
double _height = 0
EColorShift _darkness = EColorShift(Color.fromARGB(0, 0, 0, 0), 0) color that the are with no light will have

Methods:

get width -> double returns width
get height > double returns height
**set darkness(EColorShift value) sets darkness
getEffect(String name) -> EEffect? returns Effect with the name name
addEffect(EEffect eEffect) -> void
addEffects(List eEffects) -> void
removeEffect(String name) -> void
resize(double width, double height) -> void resizes the scene

EEffects

Examples

Documentation

EVector2D

Constructors:

Variables:

Methods:

ERelative

Constructors:

Variables:

Pre-defined Values:

Methods:

ERelativePair

Constructors:

Variables:

Methods:

ERelativePos

Constructors:

EColorShift

Constructors:

Variables:

Methods:

EGradient

Constructors:

Variables:

Methods:

EEffect

Constructors:

Variables:

Methods:

ELight

Constructors:

Variables:

Methods:

ERadialLight

Constructors:

Variables:

ELightBeam

Constructors:

Variables:

EFire

Constructors:

Variables:

ELightning

Constructors:

Variables:

Methods:

EScene

Constructors:

Variables:

Methods:

Libraries

eeffects package