This code demonstrates the setup of a Flutter app with a web view, allowing integration of web-based content within a mobile application, specifically showcasing a DocuSeal form within the web view component.
The WebviewPage class, a stateful widget, manages a WebViewController to control the web view. In the initState() method, an HTML string is defined containing a basic HTML structure with a script tag linking to a DocuSeal form. The _controller is initialized here to load this HTML content into the web view. Additionally, the controller settings, such as enabling JavaScript and defining a navigation delegate, are configured.
data-src: This attribute specifies the URL of the DocuSeal form that you want to embed. Each template form on DocuSeal has a unique URL with slug key. "Slug" key can be obtained via the /templates API or copied from the template page in the web UI.
data-email: This attribute is used to initialize the form for a specified email address for the signer.
Signing forms initialized via template URL and email work only if the template contains a single signing party. For signing forms with multiple parties all signers should be initiated via the API.
Learn more:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const DocuSealDemoApp());
}
class DocuSealDemoApp extends StatelessWidget {
const DocuSealDemoApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DocuSeal Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
home: const WebviewPage(),
);
}
}
class WebviewPage extends StatefulWidget {
const WebviewPage({Key? key}) : super(key: key);
@override
State<WebviewPage> createState() => _WebviewPageState();
}
class _WebviewPageState extends State<WebviewPage> {
WebViewController? _controller;
@override
void initState() {
String html = '''
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.docuseal.co/js/form.js"></script>
</head>
<body>
<docuseal-form
id="docusealForm"
data-src="https://docuseal.co/d/LEVGR9rhZYf86M"
data-email="signer@example.com">
</docuseal-form>
</body>
</html>
''';
super.initState();
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(
NavigationDelegate(
onNavigationRequest: (NavigationRequest request) {
return NavigationDecision.navigate;
},
),
)
..loadHtmlString(html);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("DocuSeal Demo"),
actions: const [],
),
body: WebViewWidget(controller: _controller!));
}
}