fix: use characters api to render unicode (#15)

* fix: use characters api to render unicode

* docs: fix pana docs warnings

* docs(example): update the example to have unicode characters

* fix: dart formatting

Author: Sandip Pramanik

example/ios/Flutter/AppFrameworkInfo.plist

@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>11.0</string>
+  <string>12.0</string>
 </dict>
 </plist>

example/ios/Runner.xcodeproj/project.pbxproj

@@ -169,7 +169,7 @@
 			isa = PBXProject;
 			attributes = {
 				BuildIndependentTargetsInParallel = YES;
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1510;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					331C8080294A63A400263BE5 = {
@@ -345,7 +345,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SUPPORTED_PLATFORMS = iphoneos;
@@ -472,7 +472,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -521,7 +521,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SUPPORTED_PLATFORMS = iphoneos;

example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

example/ios/Runner/AppDelegate.swift

@@ -1,7 +1,7 @@
 import UIKit
 import Flutter
 
-@UIApplicationMain
+@main
 @objc class AppDelegate: FlutterAppDelegate {
   override func application(
     _ application: UIApplication,

example/lib/main.dart

@@ -1,4 +1,3 @@
-// import 'package:example/widgets/widgets.dart';
 import 'package:flutter/material.dart';
 import 'package:typethis/typethis.dart';
 
@@ -37,7 +36,7 @@ class _MyAppState extends State<MyApp> {
           onFreezePressed: () => controller.freeze(),
           onUnfreezePressed: () => controller.unfreeze(),
           child: TypeThis(
-            string: 'An example string with typing animation.',
+            string: 'An example string 💥 with typing 😎 animation. 🚀',
             controller: controller,
             speed: 100,
             style: const TextStyle(fontSize: 16),

lib/src/typethis.dart

@@ -55,7 +55,7 @@ class TypeThis extends StatefulWidget {
   /// [TextAlign.end] are interpreted.
   ///
   /// This is also used to disambiguate how to render bidirectional text. For
-  /// example, if the [data] is an English phrase followed by a Hebrew phrase,
+  /// example, if the [string] is an English phrase followed by a Hebrew phrase,
   /// in a [TextDirection.ltr] context the English phrase will be on the left
   /// and the Hebrew phrase to its right, while in a [TextDirection.rtl]
   /// context, the English phrase will be on the right and the Hebrew phrase on
@@ -160,7 +160,7 @@ class TypeThis extends StatefulWidget {
   ///
   /// `unfreeze` method resumes the typing anmation from where it was frozen last time.
   ///
-  /// Remember to [dispose] of the [TypeThisController] when it is no longer
+  /// Remember to dispose of the [TypeThisController] when it is no longer
   /// needed. This will ensure we discard any resources used by the object.
   final TypeThisController? controller;
 
@@ -268,7 +268,7 @@ class _TypeThisState extends State<TypeThis> {
       timer.cancel();
     } else if (widget.controller?.state == TypeThisControllerState.resumed) {
       timer.cancel();
-      if (currentStep != widget.string.length) {
+      if (currentStep != widget.string.characters.length) {
         _startTimerAndUpdateState();
       }
     }
@@ -277,7 +277,7 @@ class _TypeThisState extends State<TypeThis> {
   void _startTimerAndUpdateState() {
     timer = Timer.periodic(Duration(milliseconds: widget.speed), (_) {
       currentStep++;
-      if (currentStep == widget.string.length) {
+      if (currentStep == widget.string.characters.length) {
         timer.cancel();
       }
       if (mounted) {
@@ -300,10 +300,10 @@ class _TypeThisState extends State<TypeThis> {
 
     for (int i = 0; i < richTextMappers.length; i++) {
       final renderedTexts = widgets.map((w) => w.text);
-      final ongoingLength = renderedTexts.join('').length;
+      final ongoingLength = renderedTexts.join('').characters.length;
 
       final currentEntry = richTextMappers[i].entries.first;
-      final currentKeyLength = currentEntry.key.length;
+      final currentKeyLength = currentEntry.key.characters.length;
 
       if (ongoingLength + currentKeyLength <= subStrEndIndex) {
         widgets.add(
@@ -318,7 +318,7 @@ class _TypeThisState extends State<TypeThis> {
 
         widgets.add(
           TextSpan(
-            text: currentEntry.key.substring(0, extraSpace),
+            text: currentEntry.key.characters.take(extraSpace).toString(),
             style: currentEntry.value,
           ),
         );

lib/typethis.dart

@@ -1,3 +1,5 @@
+/// A flutter package that aims to simplify versatile typing animation
+/// with rich text effects and other operations (reset, freeze, unfreeze).
 library typethis;
 
 export 'src/blinking_cursor.dart';

test/typethis_test.dart

@@ -353,5 +353,37 @@ void main() {
         expect(find.byType(BlinkingCursor), findsOneWidget);
       });
     });
+
+    testWidgets('works with unicode characters (emoji)', (widgetTester) async {
+      const text = '🚀 string 😃 with 👨‍💻✨ emoji 👀';
+      await widgetTester.pumpApp(
+        buildSubject(
+          string: text,
+        ),
+      );
+      await widgetTester.pump(const Duration(milliseconds: 55));
+
+      final finder = find.byType(RichText);
+      final richTextWidget = widgetTester.firstWidget<RichText>(finder);
+
+      expect(
+        richTextWidget.text.toPlainText(),
+        text.characters.take(1).toString(),
+      );
+
+      await widgetTester.pump(const Duration(milliseconds: 501));
+      final updatedRichTextWidget = widgetTester.firstWidget<RichText>(finder);
+      expect(
+        updatedRichTextWidget.text.toPlainText(),
+        text.characters.take(11).toString(),
+      );
+
+      await widgetTester.pump(const Duration(seconds: 2));
+      final wholeRichTextWidget = widgetTester.firstWidget<RichText>(finder);
+      expect(
+        wholeRichTextWidget.text.toPlainText(),
+        text,
+      );
+    });
   });
 }