Introduction: Using Flutter to realize the function of barrage, easily realize the effect of tiger tooth and douyu barrage.

Here’s an example:

Realize the principle of

The realization principle of the barrage is very simple, that is, a barrage moves from the left to the right. Of course, we need to calculate the vertical offset of the barrage, otherwise all the shells will cover each other in a straight line. 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,
    );
  }
Copy the code

Calculate the vertical offset:

_computeTop(int index, double perRowHeight) {
  // The number of rounds
  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 with 2 lines
    top += perRowHeight / 2;
  }
  if(widget.randomOffset ! =0 && top > widget.randomOffset) {
    top += _random.nextInt(widget.randomOffset) * 2 - widget.randomOffset;
  }
  return top;
}
Copy the code

Once these are ready, it is time to create a barrage, now create the simplest text barrage:

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

The effect is as follows:

Create a bullet screen for VIP users, in fact, the font changed color:

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

The effect is as follows:

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

The effect is as follows:

Create a barrage to send rockets:

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

The effect is as follows:

The rocket is a little ugly, but that’s not the point.

In fact, it was not as easy as I thought at the beginning. There were some problems in the process, but fortunately, they were solved eventually.

If you think it’s good, give it a little thumbs-up.

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com