As a mobile developer, I have had to create a lot of listing pages. The content, styling, and layout may all differ, but structurally, they are the same. When I first started using Flutter, I was immediately impressed by how fast they are to stand up. Nearly out of the box, the ListView and the Card work extremely well and support a wide variety of devices and use cases with no additional styling – all while remaining extensible.

With this in mind, when I needed to create a listing page that displayed variable lengths of pre-generated text that could be expanded and collapsed, I was not particularly concerned about the complexity of the task. However, I very quickly realized that Flutter is less optimized for handling large blocks of text than it is for displaying lists. I quickly encountered unexpected complexities that I had to manually account for. In this post, I’ll walk through the basic structure and explore which components can be used for solving this problem and creating collapsible text in Flutter.