Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can't show bottomSheet #211

Open
naivor opened this issue Oct 23, 2018 · 5 comments
Open

can't show bottomSheet #211

naivor opened this issue Oct 23, 2018 · 5 comments

Comments

@naivor
Copy link

naivor commented Oct 23, 2018

i can't show bottomSheet in the page use this widget ,hao can i do to solve it ?

@LuospFighting
Copy link

i can't show bottomSheet in the page use this widget ,hao can i do to solve it ?
how do?

@naivor
Copy link
Author

naivor commented Nov 20, 2018

@000lsp123

my solution is :

class CustomWebView extends StatefulWidget {
  final AppBar appBar;
  final String url;
  final bool withJavascript;
  final bool clearCache;
  final bool clearCookies;
  final bool enableAppScheme;
  final String userAgent;
  final bool primary;
  final bool withZoom;
  final bool withLocalStorage;
  final bool withLocalUrl;
  final bool scrollBar;

  final Map<String, String> headers;

  _CustomWebViewState state;

  CustomWebView(
      {Key key,
      @required this.url,
      @required this.appBar,
      this.headers,
      this.withJavascript,
      this.clearCache,
      this.clearCookies,
      this.enableAppScheme,
      this.userAgent,
      this.primary = true,
      this.withZoom,
      this.withLocalStorage,
      this.withLocalUrl,
      this.scrollBar})
      : super(key: key);

  @override
  _CustomWebViewState createState() {
    if (state == null) {
      state = new _CustomWebViewState();
    }

    return state;
  }

  void notifyShowBottomSheet(
      BuildContext context, ScaffoldFeatureController controller) {
    if (state == null) {
      state = new _CustomWebViewState();
    }

    state._resizeWebViewRect(context, controller);
  }
}

class _CustomWebViewState extends State<CustomWebView> {
  final webviewReference = new FlutterWebviewPlugin();
  Rect _rect;
  Timer _resizeTimer;

  static bool bottomSheetState;

  var mediaQuery;

  @override
  void initState() {
    _buildWebViewRect(context);

    super.initState();
    webviewReference.close();
  }

  @override
  void dispose() {
    super.dispose();
    webviewReference.close();
    webviewReference.dispose();
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    mediaQuery = MediaQuery.of(context);
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    _buildWebViewRect(context);
    return new Center(child: const CircularProgressIndicator());
  }

  void _buildWebViewRect(BuildContext context, {Rect newRect}) {
    Future.delayed(new Duration(milliseconds: 100), () {
      var rect;

      if (newRect != null) {
        rect = newRect;
      } else {
        rect = _buildRect(context);
      }

      if (_rect == null) {
        _rect = rect;
        webviewReference.launch(widget.url,
            headers: widget.headers,
            withJavascript: widget.withJavascript,
            clearCache: widget.clearCache,
            clearCookies: widget.clearCookies,
            enableAppScheme: widget.enableAppScheme,
            userAgent: widget.userAgent,
            rect: _rect,
            withZoom: widget.withZoom,
            withLocalStorage: widget.withLocalStorage,
            withLocalUrl: widget.withLocalUrl,
            scrollBar: widget.scrollBar);
      } else {
        if (_rect != rect) {
          _rect = rect;
          _resizeTimer?.cancel();
          _resizeTimer = new Timer(new Duration(milliseconds: 300), () {
            // avoid resizing to fast when build is called multiple time
            webviewReference.resize(_rect);
          });
        }
      }
    });
  }

  Rect _buildRect(BuildContext context) {
    if (mediaQuery == null) {
      mediaQuery = MediaQuery.of(context);
    }
    final topPadding = widget.primary ? mediaQuery.padding.top : 0.0;
    var top = topPadding;

    if (widget.appBar != null) {
      top = widget.appBar.preferredSize.height + topPadding;
    }

    if (top < 60) {
      top = top + 24;
    }

    var height = mediaQuery.size.height - top;

    debugPrint("top:$top");

    return new Rect.fromLTWH(0.0, top, mediaQuery.size.width, height);
  }

  _resizeWebViewRect(
      BuildContext context, ScaffoldFeatureController controller) {
    // 显示
    Future.delayed(new Duration(milliseconds: 500), () {
      if (context != null) {
        var height = context.size.height;
        debugPrint("bottomSheet height:$height");
        Rect rect = _buildRect(context);
        _buildWebViewRect(context,
            newRect: new Rect.fromLTWH(
                rect.left, rect.top, rect.width, rect.height - height));

        //隐藏
        if (controller != null) {
          controller.closed.then((value) {
            debugPrint("bottomSheet close");
            _buildWebViewRect(context);
          });
        }
      }
    });
  }
}

and

var controller = _Key.currentState.showBottomSheet((context) {

        customWebView.notifyShowBottomSheet(context, controller);

        return buildShareWidget(context,
            shareUrl: widget.shareUrlDirect ? widget.url : widget.shareUrl,
            content: shareContent,
            title: shareTitle);
      });

@jjjachyty
Copy link

jjjachyty commented Aug 23, 2019

@naivor
is there has full example?i don't get how to use

var controller = _Key.currentState.showBottomSheet((context) {

        customWebView.notifyShowBottomSheet(context, controller);

        return buildShareWidget(context,
            shareUrl: widget.shareUrlDirect ? widget.url : widget.shareUrl,
            content: shareContent,
            title: shareTitle);
      });

_Key?customWebView ? controller?

@charafau
Copy link
Collaborator

charafau commented Sep 9, 2019

basicly you need to display rect with 'cut' space for bottomsheet

@ThomasXing
Copy link

Could you show your complete code ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants