I am building an app where you can browse various products. Each product also has a product detail page. On that product detail page, I want to display the product image, the price, a product description and also a comment section.
Because the product description can be quite long, I don't want to show the entire description right away to the user, but rather enable the user to be able to expand the description with a click on read more.
Below my product description is a comments section. The comments can expand to the top as well as to the bottom. The reason behind this is it is basically like a paginated site where you can load older comments and newer comments. I have solved this as described here.
However, because I have center key set, the product description does expand to the top when I click read more. That's the behavior I want to change.
- I want my product description to expand to the bottom and push all widgets below down
- Older comments to expand to the top and push the all widgets above up
- Newer comments to expand to the bottom and push all widgets below down
At all time, the user should stay where he is on the screen. I do not want to use functions like jumpTo to jump to the top when the product description expands up. I want to solve this problem properly and have the product description expanding down. How can I archive that?
Secondly, I also want to archive that when a user opens the page it starts at the top, with the product image, like every other page. What do I need to do in order to archive that goal too?
Here you can find an example of my code. I have added two floating buttons which simulate comments being added to the top and to the bottom: https://dartpad.dev/?id=486578f48833dd3d53b1f76080ac6f23
I am grateful for any kind of help!