WebView in ScrollView (automatic scroll)

Question

I develop an app for musicians. The main functionality is the automatic scrolling of the screen (lyrics). I have all my content in HTML and so I need to use the WebView widget. My problem is that I can't do the automatic scrolling. I am trying to use SingleChildScrollView as shown in the code below.

Using WebView I always get a blank screen. When I use a text variable everything works fine.

import 'package:scroll/models/song.dart';
import 'package:flutter/material.dart';
import 'package:scroll/global.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

import 'package:webview_flutter/webview_flutter.dart';

List _songLines = [];
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State with TickerProviderStateMixin {
  ScrollController _scrollController = ScrollController();
  bool scroll = false;
  int speedFactor = 20;

  int userId = 0;
  // Get json result and convert it to model. Then add
  Future getDetails() async {
    var _sharedPreferences = await SharedPreferences.getInstance();
    userId = _sharedPreferences.getInt('USERID') ?? 0;
    final String url = '$URL_SONGS/readOne.php?id=${562}'; // prov

    final mapResponse = await http.get(url);
    final responseJson = json.decode(mapResponse.body);

    setState(() {
      if (responseJson["result"] == "ok") {
        for (Map song in responseJson["data"]) {
          _songLines.add(Song.fromJson(song));
        }
      }
    });
  }

  _scroll() {
    double maxExtent = _scrollController.position.maxScrollExtent;
    double distanceDifference = maxExtent - _scrollController.offset;
    double durationDouble = distanceDifference / speedFactor;

    _scrollController.animateTo(_scrollController.position.maxScrollExtent,
        duration: Duration(seconds: durationDouble.toInt()),
        curve: Curves.linear);
  }

  _toggleScrolling() {
    setState(() {
      scroll = !scroll;
    });

    if (scroll) {
      _scroll();
    } else {
      _scrollController.animateTo(_scrollController.offset,
          duration: Duration(seconds: 1), curve: Curves.linear);
    }
  }

  @override
  Widget build(BuildContext context) {
    String val = '''
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE.BUNCH OF TEXT HERE. BUNCH OF TEXT HERE.v 
''';
    return Scaffold(
      appBar: AppBar(
        title: Text('Lyrics'),
        actions: [
          IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              speedFactor -= 20;
              _scroll();
            },
          ),
          IconButton(
            icon: Icon(Icons.arrow_forward),
            onPressed: () {
              speedFactor += 20;
              _scroll();
            },
          ),
        ],
      ),
      body: NotificationListener(
        onNotification: (notif) {
          if (notif is ScrollEndNotification && scroll) {
            Timer(Duration(seconds: 1), () {
              _scroll();
            });
          }
          return true;
        },
        child: SingleChildScrollView(
          child: PrimaryScrollController(
            controller: _scrollController,
            child: WebviewWiget(),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        _toggleScrolling();
      }), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class WebviewWiget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("Build WebviewWiget");
    return Container(
      constraints: BoxConstraints(maxHeight: 500),
      child: WebView(
        initialUrl: "https://en.wikipedia.org/wiki/Flutter_(software)/",
      ),
    );
  }
}

WebView in ScrollView (automatic scroll)

0 Answers