Prevent Flutter WebView from Overflowing a Horizontally Scrolling Carousel?

Issue

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.

enter image description here

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

enter image description here

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.

Solution

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

enter image description here

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

Answered By – chunhunghan

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.