PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

The effect

Implementation approach

For convenience, the demo just writes out several sets of couplets and randomly generates a number between 0 and 4 each time it gets the couplet data. This ensures that the couplet displayed each time is random. The layout is very simple, the vertical text here is more alternative 😆, the width is fixed, so that each line can only show the next text, so that you can achieve the effect of text wrapping.

Container( width: 70, height: _downAnimationController.value * 420, alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20), color: const Color(0xffc62c21), child: Text( _downList[randomNum], maxLines: 999, textAlign: TextAlign.center, style: const TextStyle( fontFamily: "Kaiti ", height: 1.5, fontSize: 35, fontWeight: fontweight.bold),), AnimatedOpacity(duration: const Duration(milliseconds: 1000), opacity: _showFu ? 1 : 0, child: Image.asset( "assets/images/fu.png", width: 120, height: 120, ), ), ], ), ); }Copy the code

The AnimationController is used to dynamically update the height and width of the upstream and downstream layouts, while the AnimatedOpacity animation of the Chinese character fu in the middle is implemented using the AnimatedOpacity component. So in order to complete the dynamic effect of continuous display of upstream and downstream, horizontal batch and fu, the key point is: First let animation controller to start playing, in this animation listening through animationController. IsCompleted method to judge whether linked animation completed, continue to call after the completion of open bottom allied animation bottom allied forward method of the controller. Similarly, open the horizontal batch animation when listening to the next animation, and change the field controlling the transparency of fu character to true after the last animation is completed, refresh the layout so that the fu character is displayed in a gradual manner.

_downAnimationController = AnimationController(duration: const Duration(seconds: 2), vsync: this); _downAnimationController. AddListener (() {/ / bottom allied animation complete start guangpi animation if _downAnimationController. IsCompleted () { _horizontalAnimationController.forward(); } setState(() {}); }); _upAnimationController = AnimationController(duration: const Duration(seconds: 2), vsync: this); _upAnimationController. AddListener (() {/ / top allied animation complete start bottom allied animation if _upAnimationController. IsCompleted () { _downAnimationController.forward(); } setState(() {}); }); _upAnimationController.forward(); _horizontalAnimationController = AnimationController(duration: const Duration(seconds: 2), vsync: this); _horizontalAnimationController. AddListener (() {/ / horizontal batch animation complete began to show everyone the if (_horizontalAnimationController. IsCompleted) { _showFu = true; } setState(() {}); });Copy the code

Modify fonts and add music

To modify the font, you need to find the font package you want, put it into assets directory, declare it in pubspec.yaml, and specify the corresponding font name for fontFamily in the style property of the Text component when referencing it.

Fonts: -family: kaiti fonts: -asset: Assets /fonts/ Kaiti. TTF TextStyle(fontFamily: "kaiti", height: 1.5, fontSize: 35, fontWeight: FontWeight.bold)Copy the code

To import local music, you need to put the MP3 music file into assets directory. You also need to declare it in pubspec.yaml. ^0.20.1, first initialize the AudioCache object, then call its play or loop method to play.

AudioCache player = AudioCache();
player.loop('sounds/bg.mp3');
Copy the code

Note that the assets folder is already in the file path by default, so there is no need to spliceassets.

The overall implementation of the effect is very simple, with complete code attached