flutter好用的輪子推薦十一-flutter文字動效組件

前言

Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一概，好用輪子萬里挑一！Flutter做爲這兩年開始崛起的跨平臺開發框架，其第三方生態相比其餘成熟框架還略有不足，但輪子的數量也已經不少了。本系列文章挑選平常app開發經常使用的輪子分享出來，給你們提升搬磚效率，同時也但願flutter的生態愈來愈完善，輪子愈來愈多。

本系列文章準備了超過50個輪子推薦，工做緣由，儘可能每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網

正文

輪子

• 輪子名稱：animated_text_kit
• 輪子概述：flutter文字動效組件.
• 輪子做者：aagarwal9782@gmail.com
• 推薦指數：★★★★
• 經常使用指數：★★★
• 效果預覽：

安裝

dependencies:
 animated_text_kit: ^1.3.1
複製代碼

import 'package:animated_text_kit/animated_text_kit.dart';
複製代碼

基本使用

Fade效果

FadeAnimatedTextKit(
    duration: Duration(milliseconds: 5000),//動畫持續時間 
    isRepeatingAnimation: true,
    text: ["文字", "動起來", "common!!!"],
    textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
),
複製代碼

Rotate效果

RotateAnimatedTextKit(
    onTap: () {
        print("Tap Event");//組件點擊事件
    },
    text: ["小包子", "切圖仔", "最後的倔強"],
    textStyle: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold),
    textAlign: TextAlign.center,
    alignment: AlignmentDirectional.topStart,
)
複製代碼

Typer效果

TyperAnimatedTextKit(
    text: [
    "學習使我快樂",
    "切圖仔最後的倔強",
    ],
    textStyle: TextStyle(
        fontSize: 30.0,
        fontFamily: "Bobbers"
    ),
    textAlign: TextAlign.start,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
)
複製代碼

Typewriter效果

TypewriterAnimatedTextKit(
    text: [
    "切圖仔最後的倔強",
    ],
    textStyle: TextStyle(
        fontSize: 30.0,
        fontFamily: "Agne"
    ),
    textAlign: TextAlign.start,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
)
複製代碼

Scale效果

ScaleAnimatedTextKit(
    text: [
    "Flutter",
    "輪子",
    "推薦"
    ],
    textStyle: TextStyle(
        fontSize: 70.0,
        fontFamily: "Canterbury"
    ),
    textAlign: TextAlign.start,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
)
複製代碼

Colorize效果

ColorizeAnimatedTextKit(
    text: [
        "小包子",
        "flutter",
    ],
    textStyle: TextStyle(
        fontSize: 32.0, 
        fontFamily: "Horizon"
    ),
    colors: [
        Colors.purple,
        Colors.blue,
        Colors.yellow,
        Colors.red,
    ],
    textAlign: TextAlign.start,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
)
複製代碼

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/an…
• 系列演示demo源碼：github.com/826327700/f…