How can I go back to the previous page with flutter_webview on button click? How can I go back to the previous page with flutter_webview on button click? dart dart

How can I go back to the previous page with flutter_webview on button click?


Future<bool> _willPopCallback() async {    WebViewController webViewController = await _controller.future;    bool canNavigate = await webViewController.canGoBack();    if (canNavigate) {      webViewController.goBack();      return false;    } else {      return true;    }  }


I did it with different code than the previous answer. I followed this tutorial to get the webview & the floating button working. From there, it is really easy to give the floating button a back arrow icon and make the webview go back a page when the floating button is clicked.

To make the webview go back a page when the floating button is clicked (put this in its onpressed method):

 controller.data.goBack();

The icon of the floating button can easily be changed at this line of code:

child: Icon(Icons.arrow_back)

All of the different buttons can be found here: link

Here is all of my code:

import 'package:flutter/material.dart';import 'package:webview_flutter/webview_flutter.dart';import 'dart:async';void main() => runApp(MyApp());class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'App',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(title: 'App'),    );  }}class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);  final String title;  @override  _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {  final Completer<WebViewController> _controller = Completer<WebViewController>();  @override  Widget build(BuildContext context) {    return Scaffold(      body: WebView(        initialUrl: "https://google.com",        javascriptMode: JavascriptMode.unrestricted,        onWebViewCreated: (WebViewController webViewController) {          _controller.complete(webViewController);        },      ),      floatingActionButton: FutureBuilder<WebViewController>(        future: _controller.future,        builder: (BuildContext context,           AsyncSnapshot<WebViewController> controller) {            if (controller.hasData) {              return FloatingActionButton(                child: Icon(Icons.arrow_back),                onPressed: () {                  controller.data.goBack();                });            }            return Container();          }        ),    );  }}


I did it! =D

It might look simple to lots of people haha, but for someone who never touched this kind of stuff before, I'm very proud of my ninja Ctrl C + Ctrl V. Just kidding, I looked at loads of exemples and tried this and it workd, if anyone has any suggestions I'd aprecciate it! =)

Here's what I did:

import 'package:flutter/material.dart';import 'package:webview_flutter/webview_flutter.dart';import 'package:flutter/services.dart';import 'dart:async';void main () {  runApp(MaterialApp(    title: 'Something',    home: AplicativoB2b(),    debugShowCheckedModeBanner: false,  ));  SystemChrome.setEnabledSystemUIOverlays ([]);}class AplicativoB2b extends StatefulWidget {  @override  _AplicativoB2bState createState() => _AplicativoB2bState();}class _AplicativoB2bState extends State<AplicativoB2b> {  Completer<WebViewController> _controller = Completer<WebViewController>();  @override  Widget build(BuildContext context) {    return Scaffold(      body: WebView(        initialUrl: 'https://google.com',        javascriptMode: JavascriptMode.unrestricted,        onWebViewCreated: (WebViewController webViewController) {           _controller.complete(webViewController);        },      ),      floatingActionButton: NavigationControls(_controller.future), // <-- added this      );  }}

And the class I used for the floatingActionButton.

class NavigationControls extends StatelessWidget {  const NavigationControls(this._webViewControllerFuture)      : assert(_webViewControllerFuture != null);  final Future<WebViewController> _webViewControllerFuture;  @override  Widget build(BuildContext context) {    return FutureBuilder<WebViewController>(      future: _webViewControllerFuture,      builder:          (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {        final bool webViewReady =            snapshot.connectionState == ConnectionState.done;        final WebViewController controller = snapshot.data;        return FloatingActionButton.extended(              onPressed: !webViewReady                  ? null                  : () => navigate(context, controller, goBack: true),              icon: Icon(Icons.arrow_back),              backgroundColor: Colors.black,              label: Text("Voltar"),        );      },    );  }  navigate(BuildContext context, WebViewController controller,      {bool goBack: false}) async {    bool canNavigate =        goBack ? await controller.canGoBack() : await controller.canGoForward();    if (canNavigate) {      goBack ? controller.goBack() : controller.goForward();    } else {      Scaffold.of(context).showSnackBar(        SnackBar(            content: Text("Sem histórico anterior")),      );    }  }}

That's basically the whole code. Flutter is cool and easy to lean when you really want it.Thx to all!