CODEWITHSUNDEEP
htmlflutterflutterwebviewplugin
H Zan
H Zan

Reputation: 387

How to start new page from link in local html file in flutter

I want to start new page in flutter from a link in local html file.

I want to go Page_two.dart page from webview(Page_one).I loaded webview is ok. 

 <p style="margin-left: 30px;">Read <a style= "text-decoration: none;" 
 href="Page_two.dart">Prohibited ads</a></p></n>

This is my Page_one.dart file

 class LoadHTMLFileToWEbView extends StatefulWidget {
 @override
   _LoadHTMLFileToWEbViewState createState() => 
  _LoadHTMLFileToWEbViewState();
 }

 class _LoadHTMLFileToWEbViewState extends State<LoadHTMLFileToWEbView> {
   @override
   Widget build(BuildContext context) {
   return FutureBuilder<String>(
  future: _loadLocalHTML(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return WebviewScaffold(
        appBar: AppBar(title: Text("Load HTM file in WebView")),
        withJavascript: true,

        appCacheEnabled: true,
        url: new Uri.dataFromString(snapshot.data, mimeType: 'text/html' , encoding: utf8)
            .toString(),
      );
    } else if (snapshot.hasError) {
      return Scaffold(
        body: Center(
          child: Text("${snapshot.error}"),
        ),
      );
    }
    return Scaffold(
      body: Center(child: CircularProgressIndicator()),
    );
  },
    );
  }
}

 Future<String> _loadLocalHTML() async {
 return await rootBundle.loadString('assets/test.html');
  }

Upvotes: 2

Views: 1760

Answers (1)

Aakash Kumar
Aakash Kumar

Reputation: 1187

You can to do this but you have to change some parts of your code.

First change href="navigate:Page_two" this way you may get that you are navigating within the app pages.

Then create a bool variable to handle the visibility of WebView as navigating with WebViewScaffold will not hide the webview itself.

Then you need to setup a listener to intersent url changes & find out if your are redirecting or navigating.

Follow the below given code


  bool _showWebView = true;
  var flutterWebviewPlugin;

  String myHtml =
      '<p style="margin-left: 30px;">Read <a style= "text-decoration: none;"  href="navigate:Page_two">Prohibited ads1</a></p>';

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Load WebView"),
      ),
      body: _showWebView ? _getWebView() : Container(),
    );
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

  _getWebView() {
    setupListener();
    return WebviewScaffold(
      withJavascript: true,
      appCacheEnabled: true,
      url: new Uri.dataFromString(myHtml, mimeType: 'text/html', encoding: utf8)
          .toString(),
    );
  }

  setupListener() {
    flutterWebviewPlugin = new FlutterWebviewPlugin();

    flutterWebviewPlugin.onUrlChanged.listen((String url) {
      if (url.startsWith("navigate:")) {
        final page = url.substring(url.indexOf(":") + 1, url.length);
        Widget widget = null;
        setState(() {
          _showWebView = false;
        });
        switch (page) {
          case 'Page_two':
            widget = PageTwo();
            break;
        }
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => widget))
            .then((value) {
          setState(() {
            _showWebView = true;
          });
        });
        flutterWebviewPlugin.close();
      }
    });
  }

This code will navigate to another flutter page when it find the navigate: keyword in the url according to your code. While redirecting we are hiding the webview & closing the listener. When user coming back to this screen the we are recreating the webview which is recreating the listener & this flow goes on.

Hope it helps.

Upvotes: 1

Related Questions