We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How can I create a preview chart that expands to a full-page chart as seen in the "Syncfusuion Flutter UI Widgets" app

Hello, I am a student and I am trying to learn how to make line charts in Flutter. 
I am planning to use the Syncfusion flutter charts, but I just have one question.

In the "Syncfusuion Flutter UI Widgets" app for demoing Syncfusion widgets, there is a smaller version of the Line chart in the examples. When you click the fullscreen button, it opens a bigger chart on a separate page. I have included screenshots at the end to illustrate what I'm referring to. How is this done? I've been digging through the documentation for the Cartesian charts, but I can't seem to find anything. I would like to be able to implement something like this. That is, I want to have a smaller "preview version" of the chart, and then I can click on it to open a bigger "full-screen" version of the chart. Can anyone please tell me how this can be done?

Thank you for your time. 

Line chart.jpg

3 Replies 1 reply marked as answer

SK Sriram Kiran Senthilkumar Syncfusion Team October 24, 2022 07:16 AM UTC

Hi Matt,

Greetings from Syncfusion.

We have checked your query at our end and have created a simple sample in which we have added rendered a chart in card view and placed a full-screen icon which on tap will navigate to another page in which the chart widget will be displayed in full-screen view. We have attached the sample below for reference.

Please check and get back to us if you require further assistance.

Sriram Kiran

Attachment: f178385_de83435.zip

Marked as answer

MK Matt Keller October 26, 2022 01:33 AM UTC

Thank you very much!

This is exactly what I was looking for!

This is very helpful.

SK Sriram Kiran Senthilkumar Syncfusion Team October 26, 2022 03:57 AM UTC

Hi Matt,

Most welcome. Kindly get in touch with us if you require further assistance. We are always happy to assist you.

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Sriram Kiran

Live Chat Icon For mobile
Up arrow icon