Flutter: EBook application: problem with zoom and scroll text

Question

I am writing an ebook application in flutter. I could have a long text page that needs to scroll (the text is outside the boundaries of the screen from the beginning). Also, I would like to zoom in the page and keep scrolling when it is zoomed in.

This is a snippet of the code

return Container(
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.all(4),
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide()
                    )
                  ),
                  margin: EdgeInsets.only(left: 4, top: 4, right: 4),
                  child: Text("Header")
                ),
                Expanded(
                  child: SingleChildScrollView(
                    child:
                      InteractiveViewer(
                        minScale: 0.5,
                        maxScale: 4,
                        child:
                        Text("A very long text...") // Here I have a text that exceeds the screen boundaries
                      ),
                  ),
                ),
              ]
            ),
          );

The problem is that when I zoom in the page, the scroll range remains the same. With this behavior the user cannot scroll the entire zoomed page.

Do you have any suggestions?

Thanks a lot.

Answer 1

Try changing the ListView() to a SingleChildScrollView()

   body: SingleChildScrollView(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: InteractiveViewer(
        maxScale: 4.0,
        minScale: 0.5,
        child: Container(
          height: 10000,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.orange, Colors.red],
              stops: <double>[0.0, 1.0],
            ),
          ),
        ),
      ),
    ),
  ),

This worked for me.

If in your case this don't work you should probably look where this snippet are being called. And instead of the SingleChildScollView wrap your e-book inside the widget you should wrap from outside of it. Like this:

 return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: SingleChildScrollView(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: <Your Widget>
    ),
  ),
);