Overview
This week I learned more about Isolate and Markdown rendering in Flutter. In this blog, I will share my learning, issues that I have faced, and how I debugged that.
Contributions
I discussed with the mentor how should search feature in the interactive book could be implemented optimally. So, we concluded that we would be doing computation related to search, i.e., fetching the page content if not cached and searching for the query in its content on different Isolate. The benefit of implementing this is that the code’s execution on both Isolate will run in parallel, which will prevent any jerkiness in the user interface. Then after the discussion, I began to work on this. I worked on a custom markdown builder and custom inline syntax, i.e., IbHighlightBuilder and IbHighlightSyntax, which will highlight the text. The search was working fine, but it had two issues.
- Search only works for exact queries ( i.e., CaseSensitive )
- Unnecessary line break after the highlight
CaseSensitive Bug
In Flutter, the caseSensitive is true by default in the RegExp constructor, and InlineSyntax ( source: markdown package ) constructor does not have any parameter to override this in the stable release. After skimming through the markdown package’s codebase, I noticed that they had added a parameter in the current version. So, to fix this, I had overridden the package.
Unnecessary Line Break
I googled about this but couldn’t find any fix. So, I decided to go through the codebase of the flutter_markdown package. After a while, I finally found the culprit, i.e., _mergeSimilarTextSpans.
What this function was doing it combines text spans with equivalent properties into a single span. The issue was that I had changed the style ( i.e., backgroundColor ) of the TextSpan using the custom markdown builder, due to which the parser recognized them as different and put them in different RichText.
And finally, the search feature started to work like a charm.
Here are the related PRs:
Next Steps:
Currently, in the search feature, the header highlighting is not working. I will have to look into it. Next, I will integrate the ‘Multiple Mentor Support’ feature and start working on my proposed task, i.e., ‘Simulator Embedding’ in the app.