flutter_cookie_bridge
A Flutter plugin that synchronizes cookies between network requests (using Dio) and WebViews (using flutter_inappwebview), enabling seamless session management across your Flutter application.
Table of Contents
- Features
- Installation
- Getting Started
- Example
- API Reference
- Steps of Integration
- Additional Configuration
- Contributing
- License
Features
- Cookie Synchronization: Automatically sync cookies between your network requests and WebView instances.
- Network Request Wrapper: Simplified network requests using Dio with built-in cookie management.
- Customizable WebView: A wrapper around InAppWebView, allowing you to easily integrate WebViews with synchronized cookies.
- Session Management: Easily manage user sessions, ensuring consistency between your app and embedded web content.
Installation
Add flutter_cookie_bridge
to your pubspec.yaml
:
dependencies:
flutter_cookie_bridge: ^0.0.1
Then, run:
flutter pub get
Getting Started
1. Import the Package
In your Dart files, import flutter_cookie_bridge
:
import 'package:flutter_cookie_bridge/flutter_cookie_bridge.dart';
2. Initialize FlutterCookieBridge
Create an instance of FlutterCookieBridge
:
final cookieBridge = FlutterCookieBridge();
3. Using NetworkManager
Use the NetworkManager
class provided by the plugin to make network requests with automatic cookie handling:
final NetworkManager _networkManager = NetworkManager();
Example GET request:
Response? response = await _networkManager.get('https://api.example.com/data');
Example POST request:
Response? response = await _networkManager.request(
url: 'https://api.example.com/data',
method: 'POST',
body: {'key': 'value'},
);
4. Creating a WebView with Cookie Synchronization
Use the getWebView
method to get a WebView
widget with synchronized cookies:
WebView _webViewManager;
Future<void> _initializeWebView() async {
_webViewManager = await cookieBridge.getWebView(url: 'https://your-url.com');
}
5. Session Management
Manage user sessions by checking for existing sessions and performing login operations as needed. Use NetworkManager
for API calls and ensure that the cookies are synchronized between the app and WebView.
Example:
Future<void> _checkSession() async {
Response? response = await _networkManager.get('$baseUrl/api/user/session');
if (response?.data.containsKey("user")) {
// User is logged in
} else {
// User is not logged in
}
}
Example
Below is a comprehensive example demonstrating how to integrate flutter_cookie_bridge
into your Flutter application.
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_cookie_bridge/flutter_cookie_bridge.dart';
import 'package:flutter_cookie_bridge/network_manager.dart';
import 'custom_webview_screen.dart';
final cookieBridge = FlutterCookieBridge();
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: MyHome());
}
}
class MyHome extends StatefulWidget {
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
final NetworkManager _networkManager = NetworkManager();
final String baseUrl = 'https://your-api.com';
@override
void initState() {
super.initState();
_checkSession();
}
Future<void> _checkSession() async {
Response? response = await _networkManager.get('$baseUrl/api/user/session');
if (response?.data.containsKey("user")) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CustomWebViewScreen(url: '$baseUrl/home'),
),
);
} else {
// Stay on login screen
}
}
Future<void> _loginAndNavigate() async {
var loginRequestBody = {
"username": "your_username",
"password": "your_password",
};
var loginResponse = await _networkManager.request(
url: '$baseUrl/api/user/login',
method: 'POST',
body: loginRequestBody,
);
if (loginResponse != null && loginResponse.statusCode == 200) {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => CustomWebViewScreen(url: '$baseUrl/home'),
),
);
} else {
// Handle login error
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Login')),
body: Center(
child: ElevatedButton(
onPressed: _loginAndNavigate,
child: const Text('Login'),
),
),
);
}
}
custom_webview_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_cookie_bridge/flutter_cookie_bridge.dart';
import 'package:flutter_cookie_bridge/network_manager.dart';
class CustomWebViewScreen extends StatefulWidget {
final String url;
const CustomWebViewScreen({Key? key, required this.url}) : super(key: key);
@override
_CustomWebViewScreenState createState() => _CustomWebViewScreenState();
}
class _CustomWebViewScreenState extends State<CustomWebViewScreen> {
late WebView _webViewManager;
final NetworkManager _networkManager = NetworkManager();
@override
void initState() {
super.initState();
_initializeWebView();
}
Future<void> _initializeWebView() async {
_webViewManager = await FlutterCookieBridge().getWebView(url: widget.url);
setState(() {});
}
Future<void> _logout() async {
await _webViewManager.logout(context);
Navigator.pop(context);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('WebView with Cookie Sync'),
actions: [
IconButton(
icon: const Icon(Icons.logout),
onPressed: _logout,
),
],
),
body: _webViewManager != null
? _webViewManager
: const Center(child: CircularProgressIndicator()),
);
}
}
In this example:
- Login Flow: The app attempts to log in the user. Upon successful login, it navigates to a
CustomWebViewScreen
displaying a WebView with cookies synchronized. - WebView Usage: The
CustomWebViewScreen
initializes a WebView usingFlutterCookieBridge().getWebView()
. - Logout Functionality: The WebView can be logged out using
_webViewManager.logout(context);
.
API Reference
FlutterCookieBridge
getWebView({required String url})
Returns a WebView
widget with cookie synchronization enabled.
Parameters:
url
(String): The URL to load in the WebView.
Example:
WebView _webViewManager = await FlutterCookieBridge().getWebView(url: 'https://your-url.com');
NetworkManager
A wrapper around Dio for making HTTP requests with automatic cookie handling.
request({required String url, required String method, Map<String, dynamic>? body, Map<String, dynamic>? headers})
Performs an HTTP request.
Parameters:
url
(String): The request URL.method
(String): The HTTP method (e.g., 'GET', 'POST').body
(Map<String, dynamic>?): The request body.headers
(Map<String, dynamic>?): The request headers.
Example:
Response? response = await _networkManager.request(
url: 'https://api.example.com/data',
method: 'POST',
body: {'key': 'value'},
);
get(String url, {Map<String, dynamic>? headers})
Performs a GET request.
Parameters:
url
(String): The request URL.headers
(Map<String, dynamic>?): The request headers.
Example:
Response? response = await _networkManager.get('https://api.example.com/data');
WebView
A wrapper around InAppWebView with cookie synchronization.
loadUrl(String url)
Loads the specified URL in the WebView.
Parameters:
url
(String): The URL to load.
Example:
_webViewManager.loadUrl('https://your-url.com');
logout(BuildContext context)
Logs out the user by clearing cookies and session data.
Parameters:
context
(BuildContext): The build context.
Example:
await _webViewManager.logout(context);
Steps of Integration
To integrate flutter_cookie_bridge
into your project, follow these steps:
-
Add the Dependency
Add
flutter_cookie_bridge
to yourpubspec.yaml
file:dependencies: flutter_cookie_bridge: ^0.0.1
Run
flutter pub get
to install the package. -
Import the Package
Import
flutter_cookie_bridge
in your Dart files where needed:import 'package:flutter_cookie_bridge/flutter_cookie_bridge.dart';
-
Initialize FlutterCookieBridge
Create an instance of
FlutterCookieBridge
:final cookieBridge = FlutterCookieBridge();
-
Use NetworkManager for API Requests
Use the
NetworkManager
class to perform network requests with automatic cookie synchronization:final NetworkManager _networkManager = NetworkManager();
Example GET request:
Response? response = await _networkManager.get('https://api.example.com/data');
Example POST request:
Response? response = await _networkManager.request( url: 'https://api.example.com/data', method: 'POST', body: {'key': 'value'}, );
-
Create WebView with Cookie Synchronization
Use
cookieBridge.getWebView
to create a WebView widget with cookies synchronized with your network requests:WebView _webViewManager; Future<void> _initializeWebView() async { _webViewManager = await cookieBridge.getWebView(url: 'https://your-url.com'); }
-
Manage User Sessions
Check for existing sessions and perform login operations as needed, using the
NetworkManager
and maintaining session consistency between your app and the WebView.// Check session Response? response = await _networkManager.get('$baseUrl/api/user/session'); if (response?.data.containsKey("user")) { // User is logged in } else { // User is not logged in }
-
Handle Logout
Use the
logout
method to clear cookies and session data:await _webViewManager.logout(context);
-
Update WebView Content
Navigate to different URLs within the WebView:
_webViewManager.loadUrl('https://your-url.com/new-page');
Additional Configuration
Handling Environment Variables
If your application uses environment variables (e.g., for base URLs or API keys), consider using the flutter_dotenv package.
Setup:
-
Add
flutter_dotenv
to yourpubspec.yaml
:dependencies: flutter_dotenv: ^5.0.2
-
Create a
.env
file in your project's root directory and add your environment variables:BASE_URL=https://your-api.com API_KEY=your_api_key
-
Load the environment variables in your
main
function:void main() async { await dotenv.load(fileName: ".env"); runApp(MyApp()); }
-
Access the variables using
dotenv.env
:final String? baseUrl = dotenv.env['BASE_URL'];
Dependencies
Ensure the following dependencies are added to your pubspec.yaml
:
dependencies:
dio: ^5.2.1
flutter_inappwebview: ^5.7.2+4
shared_preferences: ^2.1.1
Contributing
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create your feature branch (
git checkout -b feature/your-feature
). - Commit your changes (
git commit -am 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature
). - Open a pull request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
By following this guide, you can seamlessly integrate flutter_cookie_bridge
into your Flutter application, ensuring consistent session management and cookie synchronization between your network requests and WebView instances.