【老孟Flutter】自定義文字步進元件
阿新 • • 發佈：2020-11-25
> **老孟導讀**：此文介紹一個自定義元件，歡迎大家到 Github 上給個小星星，Github 還有很多我整理的 Flutter 資源。
**WriteText** 元件是一個文字步進元件，即字元一個一個顯示，就像手寫一樣。
> pub 地址：[https://pub.dev/packages/write_text](https://pub.dev/packages/write_text)
>
> Github 地址：[https://github.com/781238222/flutter-do/tree/master/write_text](https://github.com/781238222/flutter-do/tree/master/write_text)
### 引入軟體包
在 `pubspec.yaml` 中新增如下依賴：
```dart
dependencies:
write_text: ^0.0.1
```
執行命令：
```
flutter pub get
```
### 使用
```dart
WriteText(data: 'StepText 是一個步進文字元件，即字元一個一個顯示，就像手寫一樣。'),
```
預設情況下，每個字元出現時長是 **300 ms**，設定時長為 1 秒：
```dart
WriteText(
data: 'StepText 是一個步進文字元件，即字元一個一個顯示，就像手寫一樣。',
perMillSeconds: 1000,
)
```
設定字型樣式
```dart
WriteText(
data: 'StepText 是一個步進文字元件，即字元一個一個顯示，就像手寫一樣。',
textStyle: TextStyle(fontSize: 20, color: Colors.red),
)
```
設定不顯示游標：
```dart
WriteText(
data: 'StepText 是一個步進文字元件，即字元一個一個顯示，就像手寫一樣。',
showCursor: false,
),
```
設定自定義游標：
```dart
WriteText(
data: 'StepText 是一個步進文字元件，即字元一個一個顯示，就像手寫一樣。',
cursor: Container(
width: 2,
height: 16,
color: Colors.red,
),
)
```
主動控制組件的啟動和暫停：
```dart
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,
),
```
看下面的效果
完整程式碼如下：
```dart
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState exten