[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),
           ),
         ],
       ),
     ),
   ));
 }
}


この記事が気に入ったらサポートをしてみませんか?