Sliding Sheet WebView

sliding_sheet_webview

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:sliding_sheet/sliding_sheet.dart';
import 'package:webview_flutter/webview_flutter.dart';

class SlidingSheetWebView extends StatefulWidget {
  @override
  _SlidingSheetWebViewState createState() => _SlidingSheetWebViewState();
}

class _SlidingSheetWebViewState extends State<SlidingSheetWebView> {
  @override
  Widget build(BuildContext context) {}
}

class WebViewContent extends StatefulWidget {
  final String url;
  WebViewContent({this.url});

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

class _WebViewContentState extends State<WebViewContent> {
  bool _isLoading = true;
  WebViewController _controller;
  double _maxHeight;

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size.height * 0.9;
    return Scrollbar(
      child: SingleChildScrollView(
          child: Container(
        height: _maxHeight ?? screenSize,
        child: Stack(
          children: <Widget>[
            WebView(
              initialUrl: widget.url,
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (webViewController) async {
                _controller = webViewController;
              },
              onPageStarted: (String url) {
                print('Page started loading: $url');
              },
              onPageFinished: (_) async {
                try {
                  final height = await _controller.evaluateJavascript(
                      "document.documentElement.scrollHeight;");
                  print('Height: $height');
                  setState(() {
                    _maxHeight = double.parse(height);
                    _isLoading = false;
                  });
                } on Exception catch (e) {
                  print(e);
                }
              },
            ),
            Visibility(
              visible: _isLoading,
              child: Container(
                  alignment: Alignment.center,
                  child: CircularProgressIndicator()),
            )
          ],
        ),
      )),
    );
  }
}

Future<dynamic> showSlidingBottomSheetWebView(
    {BuildContext context, String url}) async {
  final result = await showSlidingBottomSheet(context, builder: (context) {
    return SlidingSheetDialog(
      elevation: 8,
      cornerRadius: 16,
      snapSpec: const SnapSpec(
        snap: true,
        snappings: [0.9],
        positioning: SnapPositioning.relativeToAvailableSpace,
      ),
      headerBuilder: (context, state) {
        return WebViewHeader(
          url: url,
        );
      },
      builder: (context, state) {
        return WebViewContent(url: url);
      },
    );
  });
  return result;
}

class WebViewHeader extends StatelessWidget {
  final String url;
  final VoidCallback onNextPressed;
  final VoidCallback onPrevPressed;

  const WebViewHeader(
      {Key key, this.onNextPressed, this.onPrevPressed, this.url})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final uri = Uri.parse(url);
    final domain = uri.host;
    return Material(
      child: Container(
        height: 40,
        width: double.infinity,
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              GestureDetector(
                child: Icon(Icons.close),
                onTap: () => Navigator.pop(context),
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  GestureDetector(
                    child: Icon(Icons.chevron_left),
                    onTap: () {
                      if (onPrevPressed != null) onPrevPressed();
                    },
                  ),
                  GestureDetector(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: Text(
                        domain,
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                  GestureDetector(
                    child: Icon(Icons.chevron_right),
                    onTap: () {
                      if (onNextPressed != null) onNextPressed();
                    },
                  ),
                ],
              ),
              Icon(Icons.more_horiz)
            ],
          ),
        ),
      ),
    );
  }
}