How to close a web view from different screen using bloc in Flutter?

Question

Do you know how to close a web view from different screen using bloc in flutter?

Deepak Rawat · Answer

To close a web view from a different screen using the BLoC pattern in Flutter you can follow these steps: Define an event in your BLoC class to trigger the closing of the web view. For example: // WebViewBlocEvent.dart abstract class WebViewBlocEvent {} class CloseWebViewEvent extends WebViewBlocEvent {} Add a corresponding state in your BLoC class to represent the state of the web view. This state will indicate whether the web view should be closed or not. For example: // WebViewBlocState.dart abstract class WebViewBlocState {} class WebViewOpenState extends WebViewBlocState {} class WebViewClosedState extends WebViewBlocState {} Implement the BLoC class that handles the events and manages the state: // WebViewBloc.dart import 'dart:async'; class WebViewBloc { final _eventStreamController = StreamController (); final _stateStreamController = StreamController (); StreamSink get eventSink => _eventStreamController.sink; Stream get stateStream => _stateStreamController.stream; WebViewBloc() { _eventStreamController.stream.listen(_handleEvent); } void _handleEvent(WebViewBlocEvent event) { if (event is CloseWebViewEvent) { _closeWebView(); } } void _closeWebView() { _stateStreamController.sink.add(WebViewClosedState()); } void dispose() { _eventStreamController.close(); _stateStreamController.close(); } } In the screen where you want to trigger the closing of the web view access the BLoC instance and add the corresponding event: // CloseWebViewScreen.dart import 'package:flutter/material.dart'; import 'WebViewBloc.dart'; class CloseWebViewScreen extends StatelessWidget { final WebViewBloc webViewBloc; CloseWebViewScreen({required this.webViewBloc}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Close WebView') ) body: Center( child: ElevatedButton( child: Text('Close WebView') onPressed: () { webViewBloc.eventSink.add(CloseWebViewEvent()); Navigator.pop(context); // Close the current screen } ) ) ); } } In the screen where the web view is displayed listen to the BLoC's state changes and handle the web view visibility accordingly: // WebViewScreen.dart import 'package:flutter/material.dart'; import 'WebViewBloc.dart'; class WebViewScreen extends StatefulWidget { final WebViewBloc webViewBloc; WebViewScreen({required this.webViewBloc}); @override _WebViewScreenState createState() => _WebViewScreenState(); } class _WebViewScreenState extends State { @override void initState() { super.initState(); widget.webViewBloc.stateStream.listen(_handleStateChange); } void _handleStateChange(WebViewBlocState state) { if (state is WebViewClosedState) { Navigator.pop(context); // Close the web view screen } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Web View Screen') ) body: Container( // Build your web view widget here ) ); } @override void dispose() { widget.webViewBloc.dispose(); super.dispose(); } } In your app's main file or wherever you create your BLoC instances create the WebViewBloc and pass it to both the CloseWebViewScreen and WebViewScreen : // main.dart import 'package:flutter/material.dart'; import 'WebViewBloc.dart'; import 'CloseWebViewScreen.dart'; import 'WebViewScreen.dart'; void main() { final webViewBloc = WebViewBloc(); runApp(MyApp(webViewBloc: webViewBloc)); } class MyApp extends StatelessWidget { final WebViewBloc webViewBloc; MyApp({required this.webViewBloc}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' home: CloseWebViewScreen(webViewBloc: webViewBloc) routes: { '/webView': (context) => WebViewScreen(webViewBloc: webViewBloc) } ); } } Now when you navigate to the CloseWebViewScreen and press the Close WebView button it will trigger the closing event close the web view screen and return to the previous screen.