preface

Implementing UI and interaction are essential skills for big front-end developers, and are also key to mastering Flutter development. While learning about Flutter, I implemented several cool UI effects that are common on clients. Although the native wheel of Flutter is built, the cross-platform properties of Flutter cannot be compared with native ones, let alone the performance of Flutter. This paper mainly introduces the basic situation and use of Flutter effects library Flutter_effects.

Project introduction

Flutter_effects: consists of multiple Flutter packages. The goal of Flutter is to achieve cool UI effects with pure Flutter. It supports Android and ios. At present, the project is just in its infancy, and we welcome your suggestions and feedback. If you have good ideas, please feel free to put forward your requirements or join us.

Functions already implemented:

type Support the child widgets note
Bad word zoom The text Only characters are supported, not rich text
The border line all –
Rainbow font The text Currently only text is supported, rich text to be determined
Particle explosions all Support for all widgets, including images
Stung to all –
Scratch CARDS all The foreground needs to be drawn on a canvas
More functions – In development…

Used to introduce

Bad word zoom

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"."Love my wife"."Wife and Daughter."
  ];
}
DiffScaleText(
  text: sentences[diffScaleNext % sentences.length],
  textStyle: TextStyle(fontSize: 20, color: Colors.blue),
)
Copy the code

DiffScaleText currently only supports Chinese and English characters, but does not support facial expressions or rich text. The text parameter controls the display of the text, update the next one only need to change the text and rebuild, do not need to manually save the historical text;

The border line

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

LineBorderText supports any widget as a child, and the autoAnim parameter controls whether an animation is automatically executed when it is created;

Rainbow font

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

RainbowText temporarily supports text color changes, and the loop parameter controls whether to execute the animation loop.

Particle explosions

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),
        )))
Copy the code

ExplosionWidget Supports any type of widget as a child. Note that the tag parameter indicates the uniqueness of the child. If you change the child, you must change the tag, otherwise the Rebuild will not explode.

Stung to

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

AnvilEffectWidget supports any type of widget as a child;

Scratch CARDS

ScratchCardWidget(strokeWidth: 20, threshold: 0.5, foreground: (canvas, size, offset) {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,),
    ))
Copy the code

ScratchCardWidget has more parameters to look at one by one:

  • StrokeWidth: the width of the hand;
  • Threshold: threshold for triggering the clearing of foreground overlay. The code logic is to calculate the proportion of fully transparent pixels.
  • Foreground: This is Function type, which is used to draw the foreground covering, that is, the scratch card coating;
  • Child: This is the content of the scratch card, supporting any widget as a child;
  • (canvas, size, offset){} : foreground coating can be foreground drawn using canvas;
More effects will continue to be updated, please pay attentionflutter_effects;

Next step

  • Optimization of existing functions: I spent a week in my spare time to drive out the current functions, it is inevitable that there are improper, not many things but the essence, optimization of performance and API calls may be more important;
  • Commit to the DART Pub: Commit to the PUB is definitely easy to use, but before that there is a new division of the module, which may be split into multiple packages to commit;
  • The introduction of events: Currently triggering animations in rebuild form is not a clever way;
  • Introduce more functions: if there is a good effect, I would like to try;

Thank you:

Particle explosion effect: github.com/tyrantgit/E…

TextView: github.com/hanks-zyh/H…

Hanks and Tyrantgit, authors of the native implementation library, thank you!

Author: HitenDev links: www.jianshu.com/p/dcec5c4f1…

To read more

2019 Android Advanced Interview questions

PNG image compression principle analysis – Diaosi tears

Android App Bundle

Ali: Why am I forbidden to define SimpleDateFormat as static?

Finally, if you are interested in technology, please pay attention to my wechat official account: Terminal R&D Department, ID: codeGooger, and advance technology together