Flutter for tiger teeth / fighting fish barrage effect

Guide reading of Lao Meng: realize the function of barrage with Flutter, and easily realize the barrage effect of tiger teeth and fighting fish.

Let's take a rendering first:

<img src="http://img.laomengit.com/barrage_5.gif" style="zoom:50%;" />

Realization principle

The implementation principle of the bullet curtain is very simple, that is, a bullet curtain is shifted from the left to the right. Of course, we need to calculate the vertical displacement of the bullet curtain, otherwise all the bullet curtains will be in a straight line, covering each other. The translation code is as follows:

@override
void initState() {
  _animationController =
      AnimationController(duration: widget.duration, vsync: this)
  ..addStatusListener((status){
    if(status == AnimationStatus.completed){
      widget.onComplete('');
    }
  });
  var begin = Offset(-1.0, .0);
  var end = Offset(1.0, .0);
  
  _animation = Tween(begin: begin, end: end).animate(_animationController);
  //Start animation
  _animationController.forward();
  super.initState();
}

@override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _animation,
      child: widget.child,
    );
  }

Calculate the offset in the vertical direction:

_computeTop(int index, double perRowHeight) {
  //Rounds of barrage
  int num = (index / widget.showCount).floor();
  var top;
  top = (index % widget.showCount) * perRowHeight + widget.padding;

  if (num % 2 == 1 && index % widget.showCount != widget.showCount - 1) {
    //The second round is in the middle of the first round of two line barrage
    top += perRowHeight / 2;
  }
  if (widget.randomOffset != 0 && top > widget.randomOffset) {
    top += _random.nextInt(widget.randomOffset) * 2 - widget.randomOffset;
  }
  return top;
}

After these preparations, a bullet curtain is created. Now, a simple text bullet curtain is created:

Text(
  text,
  style: TextStyle(color: Colors.white),
);

The effect is as follows:

<img src="http://img.laomengit.com/barrage_1.gif" style="zoom:50%;" />

To create a pop-up screen for VIP users is to change the font color:

Text(
  text,
  style: TextStyle(color: Color(0xFFE9A33A)),
)

The effect is as follows:

<img src="http://img.laomengit.com/barrage_2.gif" style="zoom:50%;" />

Add a rounded background to the text:

return Center(
  child: Container(
    padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),
    decoration: BoxDecoration(
        color: Colors.red.withOpacity(.8),
        borderRadius: BorderRadius.circular(50)),
    child: Text(
      text,
      style: TextStyle(color: Colors.white),
    ),
  ),
);

The effect is as follows:

<img src="http://img.laomengit.com/barrage_3.gif" style="zoom:50%;" />

Create a rocket feed curtain:

return Center(
  child: Container(
    padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),
    decoration: BoxDecoration(
        color: Colors.red.withOpacity(.8),
        borderRadius: BorderRadius.circular(50)),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(
          text,
          style: TextStyle(color: Colors.white),
        ),
        Image.asset('assets/images/timg.jpeg',height: 30,width: 30,),
        Text(
          'x $count',
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ],
    ),
  ),
);

The effect is as follows:

<img src="http://img.laomengit.com/barrage_4.gif" style="zoom:50%;" />

The Rockets are a little ugly, but that's not the point.

In fact, the implementation of the bullet curtain effect is not as simple as I started to think, and there are some problems in the process, but fortunately, they are all solved finally. Here is the Github address: https://github.com/781238222/flutter-do/tree/master/flutter_barrage_sample

If you think it's not bad, give me a little compliment.

Communication

Github address: https://github.com/781238222/flutter-do

Detailed usage of 170 + components: http://laomengit.com

If you have any questions or technical doubts about Flutter, please join the Flutter communication group (wechat: laomengit).

Meanwhile, I also welcome my official account of Flutter, the official account of Flutter.

Flutter's ecological construction can't be separated from you and me. We need everyone's joint efforts. Praise is also one of them. If the article helps you, I hope to give you a praise.

Tags: Mobile github

Posted on Mon, 13 Apr 2020 07:46:35 -0700 by !jazz