Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - Typing Text animation

Tags:

flutter

dart

For each of my text widgets, I actually want the text to type in instead of displaying it right away. Is there a simpler approach than using a variable and adding to it inside of setState() ?

Thanks

like image 384
OhMad Avatar asked May 28 '17 07:05

OhMad


People also ask

What is stagger animation?

A staggered animation consists of sequential or overlapping animations. To create a staggered animation, use multiple Animation objects. One AnimationController controls all of the Animation s. Each Animation object specifies the animation during an Interval . For each property being animated, create a Tween .

What is tween animation in flutter?

A linear interpolation between a beginning and ending value. Tween is useful if you want to interpolate across a range. To use a Tween object with an animation, call the Tween object's animate method and pass it the Animation object that you want to modify.

How do you slide transition in flutter?

In Flutter, it's very easy to apply a transition animation to a widget. What you need to do is wrap the widget where the transition animation will be applied on as the child of SlideTransition widget. Then, create an Animation<Offset> to define the transition.


2 Answers

This might be a good use case for an AnimatedBuilder. That will allow you to more easily control the duration of the typing animation and only rebuild your widget when the length changes. Here's an example of how to do that.

screenshot

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primaryColor: const Color.fromARGB(255, 0, 199, 0),
        accentColor: const Color.fromARGB(255, 222, 233, 226),
        brightness: Brightness.dark,
        canvasColor: Colors.black,
      ),
      home: new MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  Animation<int> _characterCount;

  int _stringIndex;
  static const List<String> _kStrings = const <String>[
    'Call trans opt: received. 2-19-98 13:24:18 REC:Log>',
    'Trace program running.',
    '[312]555-0690',
  ];
  String get _currentString => _kStrings[_stringIndex % _kStrings.length];

  @override
  Widget build(BuildContext context) {
    ThemeData theme = Theme.of(context);
    TextStyle textStyle = theme.textTheme.title.copyWith(
      fontFamily: 'Courier New',
      color: theme.primaryColor,
    );
    return new Scaffold(
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.navigate_next),
        onPressed: () async {
          AnimationController controller = new AnimationController(
            duration: const Duration(milliseconds: 4000),
            vsync: this,
          );
          setState(() {
            _stringIndex = _stringIndex == null ? 0 : _stringIndex + 1;
            _characterCount = new StepTween(begin: 0, end: _currentString.length)
              .animate(new CurvedAnimation(parent: controller, curve: Curves.easeIn));
          });
          await controller.forward();
          controller.dispose();
        },
      ),
      body: new Container(
        margin: new EdgeInsets.symmetric(vertical: 50.0, horizontal: 10.0),
        child: _characterCount == null ? null : new AnimatedBuilder(
          animation: _characterCount,
          builder: (BuildContext context, Widget child) {
            String text = _currentString.substring(0, _characterCount.value);
            return new Text(text, style: textStyle);
          },
        ),
      ),
    );
  }
}

If you plan to use this animated text widget a lot, you could refactor it into a separate class using AnimatedWidget.

like image 106
Collin Jackson Avatar answered Oct 19 '22 11:10

Collin Jackson


you can use this Plugin

animated_text_kit:

Examples : https://github.com/aagarwal1012/Animated-Text-Kit

A piece of Code :

 SizedBox(
  width: 250.0,
  child: TypewriterAnimatedTextKit(
    onTap: () {
        print("Tap Event");
      },
    text: [
      "Discipline is the best tool",
      "Design first, then code",
      "Do not patch bugs out, rewrite them",
      "Do not test bugs out, design them out",
    ],
    textStyle: TextStyle(
        fontSize: 30.0,
        fontFamily: "Agne"
    ),
    textAlign: TextAlign.start,
    alignment: AlignmentDirectional.topStart // or Alignment.topLeft
  ),
);
like image 4
Arun R. Prajapati Avatar answered Oct 19 '22 12:10

Arun R. Prajapati