前言
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…