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

小小包子發表於2019-11-10
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
)
複製程式碼

結尾

相關文章