[Flutter]TextAnimationを試す
pubspec.yamlに追加
dependencies:
animated_text_kit: ^2.5.4
コードは以下の通り
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
class TextAnimation extends HookWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Center(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
child: TextLiquidFill(
text: 'aaaaa',
waveColor: Colors.blueAccent,
boxBackgroundColor: Colors.redAccent,
textStyle: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
),
boxHeight: 200.0,
),
),
Container(
width: MediaQuery.of(context).size.width,
child: ColorizeAnimatedTextKit(
onTap: () {
print("Tap Event");
},
text: [
"aaa",
"bbb",
"ccc",
],
textStyle: TextStyle(fontSize: 60.0, fontFamily: "Horizon"),
colors: [
Colors.green,
Colors.blue,
Colors.yellow,
Colors.red,
Colors.purple,
],
textAlign: TextAlign.center,
alignment:
AlignmentDirectional.topStart // or Alignment.topLeft
),
),
SizedBox(
height: 10,
),
Container(
margin: EdgeInsets.all(16.0),
width: MediaQuery.of(context).size.width,
child: TypewriterAnimatedTextKit(
speed: Duration(milliseconds: 100),
onTap: () {
print("Tap Event");
},
text: [
"aaaaaaaaa",
"bbbb ",
"ccccccccc. . .",
". . . . . . . ",
"ddddddd d d",
],
textStyle: TextStyle(
color: Colors.black, fontSize: 30.0, fontFamily: "Agne"),
textAlign: TextAlign.start,
alignment:
// AlignmentDirectional.topStart // or Alignment.topLeft
Alignment.topLeft),
),
],
),
),
));
}
}
この記事が気に入ったらサポートをしてみませんか?