how to capture a scrollview #10

ZMNOTZ · 2019-09-26T15:48:07Z

No description provided.

gvNN7 · 2019-09-27T13:06:37Z

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

stefanpfahler · 2019-12-08T09:02:13Z

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 · 2019-12-08T09:14:12Z

@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.

gvNN7 · 2019-12-09T02:32:31Z

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.

gvNN7 · 2019-12-09T13:56:09Z

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:

stefanpfahler · 2019-12-09T23:05:43Z

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

jagan999 · 2020-02-06T22:01:51Z

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.

gvNN7 · 2020-02-07T02:58:26Z

@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.

jagan999 · 2020-02-07T14:27:27Z

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),
                    ],
                  );
                },
              ))
        ])));

}
``

gvNN7 · 2020-02-14T14:05:48Z

@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!

jagan999 · 2020-02-16T07:23:57Z

Thank you. This fix worked wonderfully.

VocsyDikshit · 2021-04-19T10:45:05Z

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

mohitarora7272 · 2021-06-29T14:36:42Z

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

NikhilMJain · 2021-08-13T14:47:39Z

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

flutzer · 2021-08-14T04:53:49Z

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?

gtuceturan · 2021-08-18T08:36:15Z

@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?

mohitarora7272 · 2021-08-18T08:52:01Z

`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

ghost · 2022-05-31T07:47:55Z

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

pawanDreemz · 2023-03-08T08:19:05Z

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

RoxDevvv · 2023-03-18T06:37:53Z

how to achieve same results but using screenshotController.captureFromWidget

LeiYao123 · 2023-05-12T10:35:43Z

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
  )

XeroDays · 2023-06-12T04:34:36Z

@LeiYao123 Thank you, this worked fine AF.

nikhil-viewzen · 2024-01-15T07:19:23Z

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?

marcellocamara · 2024-02-01T17:26:15Z

@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

ritheshSalyan closed this as completed Feb 10, 2021

ritheshSalyan mentioned this issue Feb 10, 2021

Saving a list of widgets throws findRenderObject was called on null exception. #32

Closed

gvNN7 mentioned this issue Aug 30, 2022

captureFromWidget on ListView causes Bottom Overflowed - cuts off screenshot #112

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to capture a scrollview #10

how to capture a scrollview #10

ZMNOTZ commented Sep 26, 2019

gvNN7 commented Sep 27, 2019

stefanpfahler commented Dec 8, 2019

stefanpfahler commented Dec 8, 2019

gvNN7 commented Dec 9, 2019 •

edited

Loading

gvNN7 commented Dec 9, 2019 •

edited

Loading

stefanpfahler commented Dec 9, 2019

jagan999 commented Feb 6, 2020

gvNN7 commented Feb 7, 2020 •

edited

Loading

jagan999 commented Feb 7, 2020 •

edited

Loading

gvNN7 commented Feb 14, 2020 •

edited

Loading

jagan999 commented Feb 16, 2020

VocsyDikshit commented Apr 19, 2021

mohitarora7272 commented Jun 29, 2021

NikhilMJain commented Aug 13, 2021

flutzer commented Aug 14, 2021

gtuceturan commented Aug 18, 2021

mohitarora7272 commented Aug 18, 2021 •

edited

Loading

ghost commented May 31, 2022 •

edited by ghost

Loading

pawanDreemz commented Mar 8, 2023

RoxDevvv commented Mar 18, 2023

LeiYao123 commented May 12, 2023

XeroDays commented Jun 12, 2023

nikhil-viewzen commented Jan 15, 2024

marcellocamara commented Feb 1, 2024

how to capture a scrollview #10

how to capture a scrollview #10

Comments

ZMNOTZ commented Sep 26, 2019

gvNN7 commented Sep 27, 2019

stefanpfahler commented Dec 8, 2019

stefanpfahler commented Dec 8, 2019

gvNN7 commented Dec 9, 2019 • edited Loading

gvNN7 commented Dec 9, 2019 • edited Loading

stefanpfahler commented Dec 9, 2019

jagan999 commented Feb 6, 2020

gvNN7 commented Feb 7, 2020 • edited Loading

jagan999 commented Feb 7, 2020 • edited Loading

gvNN7 commented Feb 14, 2020 • edited Loading

jagan999 commented Feb 16, 2020

VocsyDikshit commented Apr 19, 2021

mohitarora7272 commented Jun 29, 2021

NikhilMJain commented Aug 13, 2021

flutzer commented Aug 14, 2021

gtuceturan commented Aug 18, 2021

mohitarora7272 commented Aug 18, 2021 • edited Loading

ghost commented May 31, 2022 • edited by ghost Loading

pawanDreemz commented Mar 8, 2023

RoxDevvv commented Mar 18, 2023

LeiYao123 commented May 12, 2023

XeroDays commented Jun 12, 2023

nikhil-viewzen commented Jan 15, 2024

marcellocamara commented Feb 1, 2024

gvNN7 commented Dec 9, 2019 •

edited

Loading

gvNN7 commented Dec 9, 2019 •

edited

Loading

gvNN7 commented Feb 7, 2020 •

edited

Loading

jagan999 commented Feb 7, 2020 •

edited

Loading

gvNN7 commented Feb 14, 2020 •

edited

Loading

mohitarora7272 commented Aug 18, 2021 •

edited

Loading

ghost commented May 31, 2022 •

edited by ghost

Loading