【老孟Flutter】自定義文本步進組件

老孟導讀：此文介紹一個自定義組件，歡迎你們到 Github 上給個小星星，Github 還有不少我整理的 Flutter 資源。

WriteText 組件是一個文本步進組件，即字符一個一個顯示，就像手寫同樣。

pub 地址：https://pub.dev/packages/write_text

Github 地址：https://github.com/781238222/flutter-do/tree/master/write_text

引入軟件包

在 pubspec.yaml 中添加以下依賴：

dependencies:
  write_text: ^0.0.1

執行命令：

flutter pub get

使用

WriteText(data: 'StepText 是一個步進文本組件，即字符一個一個顯示，就像手寫同樣。'),

默認狀況下，每一個字符出現時長是 300 ms，設置時長爲 1 秒：

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

交流

老孟Flutter博客（330個控件用法+實戰入門系列文章）：http://laomengit.com

歡迎加入Flutter交流羣（微信：laomengit）、關注公衆號【老孟Flutter】：