how to capture a scrollview about screenshot HOT 24 CLOSED

If you are trying take a full screenshot of a listview or whatever widget that scrolls.. you might see this post

Can you add the example from your source code where you managed to get the scrollshot ? .. It would help a lot.

@stefanpfahler you can do something like this..

Wrap your list with Screenshot widget, but at this point the screenshot can't reach all items on the list.. (my list is being build on the StreamBuilder widget).

So, just wrap your Scrollable widget (or his father) with SingleChildScrollView, like this:

from screenshot.

With version 1.2.3 and flutter 2.2.3, using captureFromWidget to take a screenshot of an off-tree list widget results in a clipped image. It's only as visible as the screen instead of the entire list. Any tips on solving that?

from screenshot.

@jagan999 Sorry for the delay.. i just forget one point.

In your ListView that you wanna take a full screenshot, put a NeverScrollableScrollPhysics on it, then what is going to take control of the scrolling is the SingleChildScrollView.

So your code will be like this:

Full code: http://dontpad.com/jagan999

And the screenshot:

Hope this helps you!

from screenshot.

How can I achieve this using CustomScrollView With SliverList as a child?

from screenshot.

how to achieve same results but using screenshotController.captureFromWidget

from screenshot.

If you are trying take a full screenshot of a listview or whatever widget that scrolls.. you might see this post

Can you add the example from your source code where you managed to get the scrollshot ? .. It would help a lot.

from screenshot.

Thank you. This fix worked wonderfully.

from screenshot.

@SachinGanesh can you look into this issue pls .. I saw that you already closed an issue that covered the same problem. It would be really helpful if you could provide a little snippet of source code on how you managed to solve the problem because I can't get it to work.

from screenshot.

I am able to get full ScreenShot from screenshotController.capture();我可以从 screenshotController.capture(); 获取完整的屏幕截图 But with this screenshotController.captureFromWidget it doesn't works. It only capture visible area.但是这个 screenshotController.captureFromWidget 不起作用。它只捕获可见区域。
@pawanDreemz @RoxDevvv
try it

screenshotController.captureFromWidget(
    InheritedTheme.captureAll(context, container),
    delay: const Duration(milliseconds: 100),
    targetSize: const Size(800, 10000), // height A value as large as possible
  )

from screenshot.

Great! Thank you very much!
I think you can close this issue now

from screenshot.

Hi
I have the exact same situation mentioned in the post above where I have the following hierarchy being rendered: Card->Column->Container->ListView and using this package only rendered the visible part of the ListView. I tried wrapping the Container inside a SingleChildScrollView but it still only exports the visible part of the ListView.

from screenshot.

I've Been Using SceenShot Package But have Founded Same Problem. I have Used Stack() in Which First Container is Static background Image and Second is 10 static Containers with SingleChildViewScrollView
How can I get long ScreenShot with using the same package

from screenshot.

Anyway to do this without a scrollview before screenshot widget ?
Cannot use because of that expanded / flexible in child...

from screenshot.

I am able to get full ScreenShot from screenshotController.capture();
But with this screenshotController.captureFromWidget it doesn't works. It only capture visible area.

from screenshot.

If you are trying take a full screenshot of a listview or whatever widget that scrolls.. you might see this post

from screenshot.

If you are trying take a full screenshot of a listview or whatever widget that scrolls.. you might see this post

Can you add the example from your source code where you managed to get the scrollshot ? .. It would help a lot.

Sure! Let me remember where i use this package and i`ll post here. Stay tuned.

from screenshot.

@jagan999 hmm, are you trying to take a screenshot of entire hierarchy or just the ListView ? Can you post some example of your code here ?

Hi
I have the exact same situation mentioned in the post above where I have the following hierarchy being rendered: Card->Column->Container->ListView and using this package only rendered the visible part of the ListView. I tried wrapping the Container inside a SingleChildScrollView but it still only exports the visible part of the ListView.

from screenshot.

I'm trying to get the screenshot only of the ListView...Like you mentioned previously, I tried wrapping Screenshot widget inside SingleChildScrollView and it still only takes the screenshot of the visible portion of the ListView.

Here's the snippet of my code
``
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppTheme().scaffoldBackgroundColor,
body: ListView(controller: _controller, children: [
Container(
child: FutureBuilder(
future: buildData(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
default:
if (snapshot.hasError)
return Text(snapshot.error.toString());
else {
if (snapshot.data != null)
return Column(
children: [
CustomIconButton(
icon: Icon(MdiIcons.filePdfBox),
onPressed: () async {
// await saveInsight();
screenshotController
.capture(
path:
'${Globals().storagePath.path}/details.png')
.then((File image) {
//Capture Done
showMessage(context, 'Saved insight');
}).catchError((onError) {
print(onError);
});
}),
SingleChildScrollView(child: Screenshot(
controller: screenshotController,
child: buildDetailsCard(
context, snapshot.data)))
],
);
else
return CustomProgressIndicator();
}
}
})),
]));
}

Card buildDetailsCard(
BuildContext context, List<Map<String, dynamic>> data) {
ScrollController controller = ScrollController();

List<Map<String, dynamic>> dataTable =
    []; 

for (Map<String, dynamic> data in allData) {
  List<Map<String, dynamic>> details = data ['Data']['Details'];
  for (Map<String, dynamic> detail in details) {
    if (detail['Value'] > 0.0)
      dataTable.add(detail); //Only add non zero assets/liabilities
  }
}

return Card(
    child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
          Text(
            'Details',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          Divider(height: 8.0, color: Colors.black),
          Container(
              height: 300.0,
              width: 1500.0,
              child: ListView.builder(
                controller: controller,
                itemCount: dataTable.length,
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: <Widget>[
                      Container(
                        color: dataTable[index]['IsSummary']
                            ? AppTheme().cardColor
                            : Colors.white,
                        child: ListTile(
                            title: Text(
                                !dataTable[index]['IsSummary']
                                    ? dataTable[index]
                                            ['Class'] +
                                        ' - ' +
                                        dataTable[index]['Name']
                                    : dataTable[index]['Name'],
                                style: TextStyle(
                                    fontSize: 14.0,
                                    fontWeight: FontWeight.bold)),
                            subtitle: Text(
                                '# Active: ${dataTable[index]['NumActive'].toString()}',
                                style: TextStyle(fontSize: 12.0)),
                            trailing:
                                Text(Globals().defaultCurrency + ' ' + intl.NumberFormat("#,###").format(dataTable[index]['Value']),
                                    style: TextStyle(
                                        fontSize: 14.0,
                                        fontWeight: FontWeight.bold,
                                        color: dataTable[index]
                                                ['IsAsset']
                                            ? AppTheme().incomeColor
                                            : AppTheme().expenseColor)),
                            onTap: () {
                              if (!dataTable[index]['IsSummary'])
                                Navigator.of(context).pushNamed(
                                    dataTable[index]['Route']);
                            }),
                      ),
                      Divider(height: 4.0, color: AppTheme().primaryColor),
                    ],
                  );
                },
              ))
        ])));

}
``

from screenshot.

@mohitarora7272 did you find a solution to your specific use case with slivers?

from screenshot.

@jagan999 hmm, are you trying to take a screenshot of entire hierarchy or just the ListView ? Can you post some example of your code here ?

Hi
I have the exact same situation mentioned in the post above where I have the following hierarchy being rendered: Card->Column->Container->ListView and using this package only rendered the visible part of the ListView. I tried wrapping the Container inside a SingleChildScrollView but it still only exports the visible part of the ListView.

Hello how can print all widgets in pageview ? Do you have any idea?

from screenshot.

`body: SafeArea(
child: ListView(
controller: ScrollController(),
children: [
Container(
child: SingleChildScrollView(
child: Screenshot(
controller: screenshotController,
child: Column(
children: [
_dateTimeWidget(),
_listHeadingWidget(),
_listWidget(),
_totalQtyWidget(),
_subTotalWidget(),
],
),

),

          ),
        ),
      ],
    ),
  ),`

@mohitarora7272 did you find a solution to your specific use case with slivers?

Yes, I used the above code to achieve this at my end after lots of research on google. I have used SingleChildScrollView instead of CustomScrollView in my case and its works. Hope this will also help you. Thanks

from screenshot.

@LeiYao123 Thank you, this worked fine AF.

from screenshot.

I am able to get full ScreenShot from screenshotController.capture();我可以从 screenshotController.capture(); 获取完整的屏幕截图 But with this screenshotController.captureFromWidget it doesn't works. It only capture visible area.但是这个 screenshotController.captureFromWidget 不起作用。它只捕获可见区域。
@pawanDreemz @RoxDevvv
try it

screenshotController.captureFromWidget(
    InheritedTheme.captureAll(context, container),
    delay: const Duration(milliseconds: 100),
    targetSize: const Size(800, 10000), // height A value as large as possible
  )

what if the hieght is not set how would i achieve that then?

from screenshot.

@LeiYao123

screenshotController.captureFromWidget(
    InheritedTheme.captureAll(context, container),
    delay: const Duration(milliseconds: 100),
    targetSize: const Size(800, 10000), // height A value as large as possible
  )

This works! I've discovered that the quality is a bit lower. But ok.
Thanks

from screenshot.