Prevent Flutter WebView from Overflowing a Horizontally Scrolling Carousel?

Question

I am using using the Perspectives Pageview library in Flutter to implement a horizontal carousel. Everything works fine when I am just rendering regular Containers with images or text, etc.

However, when I embed a WebView, it overflows beyond its parent Container, and resizes upon moving the Widget around:

I am unsure of what causes this and how I may fix it so that it stays inside the parent, like other elements.

My code:

Container(
      child: Center(
        // Adding Child Widget of Perspective PageView
        child: PerspectivePageView(
          hasShadow: true, // Enable-Disable Shadow
          shadowColor: Colors.black12,
          children: <Widget>[
            Container(
                child: Column(
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.black54,
                        child: Container(
                            color: Colors.white,
                            child: Column(
                              children: [
                                Expanded(
                                  child: WebViewPlus(
                                    onWebViewCreated: (controller) {
                                      this._controller = controller;
                                      controller
                                          .loadString(_htmlForCardsList[0]);
                                    },
                                    javascriptMode: JavascriptMode.unrestricted,
                                  ),
                                )
                              ],
                            )),
                        padding: EdgeInsets.all(2),
                      ),
                    ),
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "View Next",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w400,
                                color: Colors.orange),
                          ),
                        ],
                      ),
                      height: 60,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border(
                          top: BorderSide(color: Colors.black54, width: .3),
                          bottom: BorderSide(color: Colors.black54, width: 1.5),
                          left: BorderSide(color: Colors.black54, width: 1.5),
                          right: BorderSide(color: Colors.black54, width: 1.5),
                        ),
                      ),
                    ),
                  ],
                ),
                color: Colors.orange)])))

I have also tried replacing the Expanded parent of the WebView with

Container(
          width: 300,
          height: 200,
          child: WebViewPlus(
          ...

and I encounter the same issue. Upon horizontally scrolling the carousel, the WebView size changes, unlike other content contained within the Carousel.

Many thanks for any insight.

Answer 1

You can copy paste run full code below
You can use package https://pub.dev/packages/flutter_inappwebview
code snippet

Expanded(
      child: InAppWebView(
        initialUrl: url,
        initialHeaders: {},
        initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            debuggingEnabled: true,
          ),
        ),
        onWebViewCreated:
            (InAppWebViewController controller) {
          webView = controller;
          print("onWebViewCreated");
          webView.loadData(
              data: _htmlForCardsList[0]);
        },

working demo

full code

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  InAppWebViewController webView;
  String url = "about:blank";
  double progress = 0;
  bool status = false;

  @override
  dispose() {
    webView.stopLoading();
    super.dispose();
  }

  List<String> _htmlForCardsList = [
    '''<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>'''
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
          child: Center(
              // Adding Child Widget of Perspective PageView
              child: PerspectivePageView(
                  hasShadow: true, // Enable-Disable Shadow
                  shadowColor: Colors.black12,
                  children: <Widget>[
            Container(
                child: Column(
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.black54,
                        child: Container(
                            color: Colors.white,
                            child: Column(
                              children: [
                                Expanded(
                                  child: InAppWebView(
                                    initialUrl: url,
                                    initialHeaders: {},
                                    initialOptions: InAppWebViewGroupOptions(
                                      crossPlatform: InAppWebViewOptions(
                                        debuggingEnabled: true,
                                      ),
                                    ),
                                    onWebViewCreated:
                                        (InAppWebViewController controller) {
                                      webView = controller;
                                      print("onWebViewCreated");
                                      webView.loadData(
                                          data: _htmlForCardsList[0]);
                                    },
                                    onLoadStart:
                                        (InAppWebViewController controller,
                                            String url) {
                                      print("start $status");
                                      status = false;
                                    },
                                    onLoadStop:
                                        (InAppWebViewController controller,
                                            String url) {
                                      print("stop $status");
                                      status = true;
                                    },
                                    onProgressChanged:
                                        (InAppWebViewController controller,
                                            int progress) {
                                      this.progress = progress / 100;
                                    },
                                  ),
                                )
                              ],
                            )),
                        padding: EdgeInsets.all(2),
                      ),
                    ),
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "View Next",
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w400,
                                color: Colors.orange),
                          ),
                        ],
                      ),
                      height: 60,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border(
                          top: BorderSide(color: Colors.black54, width: .3),
                          bottom: BorderSide(color: Colors.black54, width: 1.5),
                          left: BorderSide(color: Colors.black54, width: 1.5),
                          right: BorderSide(color: Colors.black54, width: 1.5),
                        ),
                      ),
                    ),
                  ],
                ),
                color: Colors.orange)
          ]))),
    );
  }
}