Shulou(Shulou.com)06/01 Report--

This article mainly introduces "Flutter how to achieve text scrolling highlighting effect" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "Flutter how to achieve text scrolling highlighting effect" article can help you solve the problem.

Function realization

Because there are two pieces of text in Text, you can't just use the Text component, but use Text.rich. Generate an array through textSpan and put it in text.rich. So this article needs to deal with, rather than splicing one by one, so there needs to be a parsed class to deal with.

Need to add a third-party plug-in string_scanner to the project to scan text.

Class StringParser {/ / imported text final String content; / / the tail index of the highlighted part, that is, the distinguishing position of the two segments final int endIndex; StringParser ({required this.content, required this.endIndex}); late StringScanner _ scanner; / / parsing function InlineSpan parser () {_ scanner = StringScanner (content); parseContent (); final List spans = []; int currentPosition = 0 / / the part spans.add that needs to be highlighted (TextSpan (style: _ spans.style, text: _ spans.text (content)); currentPosition = _ spans.end; / / the unhighlighted part if (currentPosition! = content.length) {spans.add (text: content.substring (currentPosition, content.length));} return TextSpan (style: TextStyleSupport.defaultStyle, children: spans);} late SpanBean _ spans / / parsing needs to become the highlighted character void parseContent () {int startIndex = 0; _ spans = SpanBean (startIndex, endIndex); if (! _ scanner.isDone) {_ scanner.position++;}

Then you need to define a highlighted data type to facilitate the text style and default style you want to highlight after modification.

Class SpanBean {SpanBean (this.start, this.end); final int start; final int end; String text (String src) {return src.substring (start, end);} TextStyle get style = > TextStyleSupport.highLightStyle;} class TextStyleSupport {static const defaultStyle = TextStyle (color: Colors.black, fontSize: 36); static const highLightStyle = TextStyle (color: Colors.green, fontSize: 36);}

At this point, the text highlighting and non-highlighting processing is complete, only need to be used after import in the file.

Scrolling effect needs to implement a play function through Future.delayed to control delayed recursive execution.

_ starPlay (flag) {/ / flag is used to determine whether to execute or suspend if (this.endIndex = = content.length + 1 | |! flag) {return;} parser = StringParser (content: content, endIndex: this.endIndex++); span = parser.parser (); setState () {}); Future.delayed (Duration (milliseconds: 100)). Then ((value) {_ starPlay (this.flag);});}

The final code in the file is

Import 'package:flutter/material.dart';import' string_parser.dart';void main () {runApp (MyApp ());} class MyApp extends StatelessWidget {/ / This widget is the root of your application. @ override Widget build (BuildContext context) {return MaterialApp (title: 'Flutter Demo', home: MyHomePage (),);}} class MyHomePage extends StatefulWidget {MyHomePage ({Key? Key}): super (key: key); @ override _ MyHomePageState createState () = > _ MyHomePageState ();} class _ MyHomePageState extends State {late InlineSpan span; final String content = "" exactly, "said the fox." To me, you are just a little boy, just like thousands of other little boys. I don't need you. You don't need me either. To you, I am just a fox, just like thousands of other foxes. But if you tame me, we will be indispensable to each other. To me, you are the only one in the world; to you, I am the only one in the world. " ; late StringParser parser; int endIndex = 0; bool flag = true; @ override void initState () {super.initState (); parser = StringParser (content: content, endIndex: endIndex); span = parser.parser () } @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text), actions: [ElevatedButton (onPressed: () {this.flag = true; _ starPlay (flag); print ('start') }, child: Text ("start"), ElevatedButton (onPressed: () {this.flag = false; / / _ starPlay (flag); print ('pause') }, child: Text ("pause")],), body: Padding (padding: const EdgeInsets.all, child: Text.rich (span),);} _ starPlay (flag) {if (this.endIndex = = content.length + 1 | |! flag) {return } parser = StringParser (content: content, endIndex: this.endIndex++); span = parser.parser (); setState (() {}); Future.delayed (Duration (milliseconds: 100)). Then ((value) {_ starPlay (this.flag);});}}

Achieve results:

This is the end of the introduction to "how to achieve text scrolling highlighting effect in Flutter". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.