Flutter实现动态字体输入的动画效果
使用组件animated_text_kit.dart
import 'package:animated_text_kit/animated_text_kit.dart';
然后将之前的Text Widget替换为TypewriterAnimatedTextKit Widget
这里可以设置
动态输入动画效果的文字内容
字体样式
字体大小
字体的粗细
TypewriterAnimatedTextKit(
text: ['Falsh Chat'],
textStyle: TextStyle(
fontSize: 45.0,
fontWeight: FontWeight.w900,
),
),
完整的代码如下图所示
import 'package:flutter/material.dart';
import 'login_screen.dart';
import 'registration_screen.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
class WelcomeScreen extends StatefulWidget {
static String id = 'welcome_screen';
@override
_WelcomeScreenState createState() => _WelcomeScreenState();
}
class _WelcomeScreenState extends State<WelcomeScreen>
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation animation;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: Duration(seconds: 1), vsync: this); //AnimationController
animation = ColorTween(begin: Colors.blueGrey, end: Colors.white)
.animate(controller);
controller.forward();
controller.addListener(() {
setState(() {});
print(animation.value);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: animation.value,
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
children: <Widget>[
Hero(
tag: 'logo',
child: Container(
child: Image.asset('images/logo.png'),
height: 60.0,
),
),
TypewriterAnimatedTextKit(
text: ['Falsh Chat'],
textStyle: TextStyle(
fontSize: 45.0,
fontWeight: FontWeight.w900,
),
),
],
),
SizedBox(
height: 48.0,
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
elevation: 5.0,
color: Colors.lightBlueAccent,
borderRadius: BorderRadius.circular(30.0),
child: MaterialButton(
onPressed: () {
Navigator.pushNamed(context, LoginScreen.id);
},
minWidth: 200.0,
height: 42.0,
child: Text(
'Log In',
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(30.0),
elevation: 5.0,
child: MaterialButton(
onPressed: () {
Navigator.pushNamed(context, RegistrationScreen.id);
},
minWidth: 200.0,
height: 42.0,
child: Text(
'Register',
),
),
),
),
],
),
),
);
}
}
实现的动画效果如上图所示