Back button is not working properly with webview flutter

Question

I am building a flutter app which simply views website URL. but I press back instead of navigating back it exists the app. I searched for solutions but no solution helped me. or that code doesn't support with latest flutter...

Here is my code


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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://flutter.dev',
    );
  }
}

Does this answer your question? [Using flutter webview as home and pressing back button closes Application](https://stackoverflow.com/questions/57878887/using-flutter-webview-as-home-and-pressing-back-button-closes-application) — user18309290, Jul 27 '22 at 11:40
@Rohit sir, What should i need to add my code so that back button will not close the app but it will navigate me to the back page ?? — swapnil mane, Jul 27 '22 at 11:52

score 0 · Answer 1 · answered Jul 27 '22 at 12:20

0

This is happening because you are not coming from any page.

This is how currently your structure is following...

main() ===> MyApp() ===> MyHomePage(title: 'Flutter Demo Home Page') ===> "your-web-vide-page".

so if you would like to work back button then there has to be any page from the page you are going to like...

Navigator.push(context, MaterialPageRoute(builder: (context) {
        return //<=== your-page-here 
      },));

answered Jul 27 '22 at 12:20

Ravin Laheri

801
3
11

Sir, it is web view application. and when I click any link, it brings me to that page but wwhen I press back button it closes the whole app... – swapnil mane Jul 27 '22 at 12:36
obviously it'll close you app because when you are loading webview it doesn't take page of your website url that you use inside WebView widget. It'll consider your MyHomePage as page not your url's page. – Ravin Laheri Jul 27 '22 at 12:43
What can do to make my back button work in web page, Sir ??? – swapnil mane Jul 27 '22 at 12:46
What would you like to show in your previous page? – Ravin Laheri Jul 27 '22 at 12:47
sir, if i open google.com and search something it will take me to the search result page. but when I click on back button in my phone I should go back to google's home page instead of closing the app... How can I do this ??? – swapnil mane Jul 28 '22 at 04:25

score 0 · Answer 2 · answered Jul 31 '22 at 20:28

You need to handle this manually. Create a webView Controller first:

final Completer<WebViewController _controller = Completer<WebViewController ();

and then create actions in the appBar, and add buttons to handle back and forward actions.

so on back button you would call:

controller.goBack();

and forward:

controller.goForward();

to handle the back button on android device you need to wrap your scaffold with willpopscop and then handle the case inside onWillPop function.

Back button is not working properly with webview flutter

2 Answers2