Flutter Expandable Collapsible Animated Text Read More

Hello friends, Our today’s tutorial is a bit different from others. In today’s tutorial we would make animated collapsible expandable text widget with Read More and Read Less button. The text widget is completely animated and control by 2 buttons. We have seen in many applications or websites when there are a large amount of Text which cannot be shown at once. Then there are Read More Button present at the bottom of text. When user clicks on the Button then the text will start expanding it self using animation until all text has been shown. So we are making this now. The best thing of this tutorial is that we are not using any custom Pub package in our tutorial. So in this tutorial we would learn about Flutter Expandable Collapsible Animated Text Read More.

Contents in this project Flutter Expandable Collapsible Animated Text Read More :-

1. Open your project’s main.dart file and import material.dart package.

2. Creating void main runApp() method and here we would call our main MyApp class.

3. Creating our first Parent class MyApp extends StatelessWidget. In this class we would call Home class.

4. Creating class Home extends StatefulWidget. In this class we would make ReadMoreText class with createState() method to enable mutable state management.

5. creating our class ReadMoreText extends State<Home>. This is our main child class and our sample Text is present in this class. Now as you can see there is a custom widget named as ExpandableText which is doing our all animation work. In flutter there are no widget associated with this name, So we have to make it manually. We are writing code for this widget.

6. Creating our ExpandableText extends StatefulWidget class. In this class first we have to make a Text receiver named as text. Now we have to make ExpandableTextState class with createState() method. All the magic happens in this class.

7. Creating our final and most important class ExpandableTextState extends State<ExpandableText> with TickerProviderStateMixin. THIS IS OUR MAIN CLASS AND ALL THE ANIMATION HAPPENS IN THIS CLASS.

8. Complete source code for main.dart file :-

Live Screenshot :-

Flutter Expandable Collapsible Animated Text Read More

Leave a Reply

Your email address will not be published.