flutter effects

March 17, 2019 · View on GitHub

A flutter package which contains a collection of some cool and beautiful effects; support android and ios .

Screenshot

typesupport childscreenshot
diffscaletext
borderlineany
rainbowtext
explosionany
anvilany
scratchcardany
moremorewaiting

Usage

diffscale


void initState() {
  super.initState();
  sentences = [
    "What is design?",
    "Design is not just",
    "what it looks like and feels like.",
    "Design is how it works. \n- Steve Jobs",
    "Older people",
    "sit down and ask,",
    "'What is it?'",
    "but the boy asks,",
    "What can I do with it?. \n- Steve Jobs",
    "Swift",
    "Objective-C",
    "iPhone",
    "iPad",
    "Mac Mini",
    "MacBook Pro",
    "Mac Pro",
    "爱老婆",
    "老婆和女儿"
  ];
}

DiffScaleText(
  text: sentences[diffScaleNext % sentences.length],
  textStyle: TextStyle(fontSize: 20, color: Colors.blue),
)

Note:the variable diffScaleNext control next position;

borderline

LineBorderText(
    child: Text(
      "Border Effect",
      style: TextStyle(fontSize: 20),
    ),
    autoAnim: true)

rainbow

RainbowText(colors: [
  Color(0xFFFF2B22),
  Color(0xFFFF7F22),
  Color(0xFFEDFF22),
  Color(0xFF22FF22),
  Color(0xFF22F4FF),
  Color(0xFF5400F7),
], text: "Welcome to BBT", loop: true)

explosion

ExplosionWidget(
    tag: "Explosion Text",
    child: Container(
        alignment: Alignment.center,
        color: Colors.blueAccent,
        child: Text(
          "Explosion Text",
          style: TextStyle(
              fontSize: 20,
              color: Colors.red,
              fontWeight: FontWeight.bold),
        )))

anvil

        
AnvilEffectWidget(child: Text(
      "👉AnvilEffect👈",
      style: TextStyle(color: Colors.white, fontSize: 20),
    )

scratchcard

ScratchCardWidget(
    strokeWidth: 20,
    threshold: 0.5,
    foreground: (canvas, size, offset) {
      if (_image != null) {
        double scale;
        double dx = 0;
        double dy = 0;
        if (_image.width * size.height >
            size.width * _image.height) {
          scale = size.height / _image.height;
          dx = (size.width - _image.width * scale) / 2;
        } else {
          scale = size.width / _image.width;
          dy = (size.height - _image.height * scale) / 2;
        }
        canvas.save();
        canvas.translate(dx, dy);
        canvas.scale(scale, scale);
        canvas.drawImage(_image, Offset(0, 0), new Paint());
        canvas.restore();
      } else {
        canvas.drawRect(
            Rect.fromLTWH(0, 0, size.width, size.height),
            Paint()
              ..color = Colors.grey);
      }
    },
    child: Container(
      color: Colors.blueAccent,
      alignment: Alignment.center,
      child: Image.asset(
        "assets/images/icon_sm_sigin_status_three.png",
        fit: BoxFit.scaleDown, height: 20,),
    ))
    
  • strokeWidth : paint's strokewidth
  • threshold : the threshold to clear the foreground covering
  • foreground : draw foreground covering
  • child : draw child

More flutter effects are under development, so stay tuned! please follow me.

Author

License

This project is licensed under the Apache Software License, Version 2.0.

See LICENSE for full of the license text.