[Day14] Flutter with GetX animated_text_kit

animated_text_kit

文字特殊效果的第三方,可以参考文档的样式作选择

使用起来类似是Flutter原生的RichText & TextSpan, 但炫炮很多.

totalRepeatCount: 重复播放次数,
pause: 播放结束停几秒再开始下一轮,
stopPauseOnTap: 点下去的时候动画暂停,

这篇借用cached_network_image的页,下面剩余的空间摆

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CachedImagePage')),
      body: SafeArea(
        child: SizedBox.expand(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: AnimatedTextKit(
                  animatedTexts: [
                    TypewriterAnimatedText(
                      'Hello world!',
                      textStyle: const TextStyle(
                        fontSize: 32.0,
                        fontWeight: FontWeight.bold,
                      ),
                      speed: const Duration(milliseconds: 500),
                    ),
                  ],
                  totalRepeatCount: 4,
                ),
              ),
              Expanded(
                child: AnimatedTextKit(
                  animatedTexts: [
                    FadeAnimatedText(
                      'Fade First',
                      textStyle: TextStyle(
                          fontSize: 32.0, fontWeight: FontWeight.bold),
                    ),
                    ScaleAnimatedText(
                      'Then Scale',
                      textStyle:
                          TextStyle(fontSize: 70.0, fontFamily: 'Canterbury'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

本篇的GitHub source code

下一篇将为大家介绍 Wrap & Chip