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.

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

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)