How can I go back to the previous page with flutter_webview on button click?
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!