I have this code in my flutter app :

class WebViewWidget1 extends StatefulWidget {
  WebViewWidget1({Key? key}) : super(key: key);

  @override
  State<WebViewWidget1> createState() => _WebViewWidget1State();
}

class _WebViewWidget1State extends State<WebViewWidget1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('title'),
      ),
      body: const WebView(
        initialUrl: "https://github.com/ArjunMalhotra07",
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

I want to implement web view and this was the code I took from the internet. This just doesn't work. It shows a blank white screen with app bar only. Where am I wrong? can't deduce.

CodePudding user response：

please add pubspec.yaml

flutter pub add flutter_inappwebview

inappwebview

Example:

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class InAppWebViewPage extends StatefulWidget {
  final String title, uri;

  const InAppWebViewPage({Key? key, required this.title, required this.uri})
      : super(key: key);

  @override
  _InAppWebViewPageState createState() => _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  int _stackIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(12),
        child: Expanded(
          child: IndexedStack(
            index: _stackIndex,
            children: [
              InAppWebView(
                initialUrlRequest: URLRequest(url: Uri.parse(widget.uri)),
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform:
                      InAppWebViewOptions(useShouldOverrideUrlLoading: true),
                ),
                onl oadStop: (_, __) {
                  setState(() {
                    _stackIndex = 0;
                  });
                },
                onl oadError: (_, __, ___, ____) {
                  setState(() {
                    _stackIndex = 0;
                  });
                  //TODO: Show error alert message (Error in receive data from server)
                },
                onl oadHttpError: (_, __, ___, ____) {
                  setState(() {
                    _stackIndex = 0;
                  });
                  //TODO: Show error alert message (Error in receive data from server)
                },
              ),
              const SizedBox(
                height: 50,
                child: CircularProgressIndicator(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Try to wrap WebView with SizedBox and give width and height to it.

SizedBox(
  width: MediaQuery.of(context).size.width, // it uses all the width of screen, you can change it
  height: MediaQuery.of(context).size.height, // it uses all the height of screen, you can change it 
  child: WebView(
    initialUrl: "https://github.com/ArjunMalhotra07",
    javascriptMode: JavascriptMode.unrestricted,
  ),
),

And don't forget to add webview_flutter package to your pubspec.yaml file.