【老孟Flutter】自定义文本步进组件

移动开发作者： 2024-08-24 20:10:01

老孟导读：此文介绍一个自定义组件，欢迎大家到 Github 上给个小星星，Github 还有很多我整理的 Flutter 资源。 WriteText 组件是一个文本步进组件，即字符一个一个显示，就像手

引入软件包

dependencies:
  write_text: ^0.0.1

flutter pub get

使用

WriteText(data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。'),

WriteText(
  data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。',perMillSeconds: 1000,)

WriteText(
  data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。',textStyle: TextStyle(fontSize: 20,color: Colors.red),)

WriteText(
  data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。',showCursor: false,),

WriteText(
  data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。',cursor: Container(
    width: 2,height: 16,color: Colors.red,)

WriteTextController _controller = WriteTextController();
bool starting = false;

RaisedButton(
              onPressed: () {
                if (starting) {
                  starting = false;
                  _controller.stop();
                } else {
                  starting = true;
                  _controller.start();
                }
                setState(() {});
              },child: Text('${starting ? '暂停' : '启动'}'),WriteText(
              data: _data,controller: _controller,autoStart: false,

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this,duration: Duration(seconds: 2));
    _controller.forward();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Center(
        child: AnimatedBuilder(
          animation: _controller,builder: (BuildContext context,Widget child) {
            return Container(
              padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(
                  color: Colors.lightBlue,borderRadius: BorderRadius.circular(4)),height: 45,width: _controller.value * 200,alignment: Alignment.center,child: _controller.value == 1.0
                  ? WriteText(
                      data: '老孟 Flutter',perMillSeconds: 200,textStyle: TextStyle(fontSize: 16,color: Colors.white),cursor: Container(
                        height: 2,width: 8,color: Colors.white,)
                  : Container(),);
          },);
  }
}