[visual sample index] Improve cookbook screenshots

[johnpryan]

Cookbook screenshots should include a screenshot of the running app, most likely the DartPad iframe on the page.

Cookbook scraper instructions

Cookbook scraper source code

[mohak852]

I wanna work on this issue. @RedBrogdon @johnpryan

[johnpryan]

@mohak852 I added some links to the relevant code and README - let me know if you have any questions.

[mohak852]

@johnpryan Should I begin with one cookbook tutorial and then proceed for the other or should I add all together in one single go?

[johnpryan]

The scraper needs to be modified to inspect the DartPad iframe. Once it's modified it will update all the screenshots.

[tusharojha]

Hi @johnpryan I am interested to solve this issue but since it's my first try with this project. I think this line https://github.com/flutter/samples/blob/master/web/samples_index/lib/cookbook.dart#L57 takes the screenshot which later gets saved but how am I supposed to inspect the DartPad iframe.

I tried to read more on this over the internet but didn't find many resources, but a workaround is to crop the screenshot but that's also not the case here. It would be great if you can suggest to me the right path to follow.

[johnpryan]

I haven't looked into it, but the idea is to load page declared in the src attribute of the iframe and then take a screenshot.