Mobile Integration: Flutter Dart Widget & WebView
Partner organizations developing mobile applications in Flutter (iOS and Android) can integrate HiTech Insurance quote funnels through two official approaches:
- Approach A: Flutter WebView (zero-maintenance web-backed embed)
- Approach B: Native Pure Dart Component (high-performance 60/120 FPS native Flutter widget)
Approach A: Flutter WebView
Using the official webview_flutter plugin alongside url_launcher, this approach embeds the /embed/widget route within your mobile view hierarchy while delegating tap actions to the system browser or custom chrome tabs.
Dependencies (pubspec.yaml)
dependencies:
flutter:
sdk: flutter
webview_flutter: ^4.10.0
url_launcher: ^6.3.0
Implementation
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';
class HiTechWebViewWidget extends StatefulWidget {
final String insurance;
final String partnerUtm;
final String theme; // 'dark' | 'light'
const HiTechWebViewWidget({
Key? key,
this.insurance = 'truck',
required this.partnerUtm,
this.theme = 'dark',
}) : super(key: key);
State<HiTechWebViewWidget> createState() => _HiTechWebViewWidgetState();
}
class _HiTechWebViewWidgetState extends State<HiTechWebViewWidget> {
late final WebViewController _controller;
bool _isLoading = true;
void initState() {
super.initState();
final url = 'https://hitechinsurance.ai/embed/widget'
'?insurance=${widget.insurance}'
'&utm=${Uri.encodeComponent(widget.partnerUtm)}'
'&theme=${widget.theme}';
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(Colors.transparent)
..setNavigationDelegate(
NavigationDelegate(
onPageFinished: (_) => setState(() => _isLoading = false),
onNavigationRequest: (NavigationRequest request) {
// When user taps CTA, open external system browser
if (request.url.contains('hitechinsurance.ai')) {
launchUrl(
Uri.parse(request.url),
mode: LaunchMode.externalApplication,
);
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
),
)
..loadRequest(Uri.parse(url));
}
Widget build(BuildContext context) {
return SizedBox(
height: 90,
child: Stack(
children: [
WebViewWidget(controller: _controller),
if (_isLoading)
const Center(
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2),
),
),
],
),
);
}
}
Approach B: Native Pure Dart Component (60/120 FPS)
For seamless native look-and-feel, instantaneous zero-latency rendering, and offline caching, use the native Dart component. It mimics the official HiTech dark/light design system with gradients, rounded corners, verified badge, and deep linking via url_launcher.
Insurance Line Enum Definition
enum HiTechInsuranceType {
// Personal Lines
auto('auto-insurance', 'Personal Auto Insurance'),
homeowners('homeowners-insurance', 'Homeowners Insurance'),
renters('renters-insurance', 'Renters Insurance'),
life('life-insurance', 'Life & Final Expense'),
motorcycle('motorcycle-insurance', 'Motorcycle Insurance'),
atv('atv-insurance', 'ATV & Powersports'),
rv('rv-insurance', 'RV & Motorhome Insurance'),
sr22('sr22-insurance', 'SR-22 High Risk Filings'),
windshield('windshield-repair-insurance', 'Windshield & Glass Coverage'),
telemedicine('telemedicine-insurance', 'Telemedicine & Health Access'),
// Commercial Lines
truck('truck-insurance', 'Commercial Trucking Insurance'),
businessAuto('business-auto-insurance', 'Commercial Fleet & Auto'),
business('business-insurance', 'General Business Insurance'),
generalLiability('general-liability-insurance', 'General Liability'),
workersComp('workers-compensation-insurance', 'Workers\' Compensation'),
// Specialized Lines
mexico('mexico-insurance', 'Cross-Border Mexico Tourist Auto'),
transportation('transportation-insurance', 'Logistics & Cargo Transport'),
construction('construction-insurance', 'Construction & Contractor Bond'),
retailWholesale('retail-and-wholesale-insurance', 'Retail & Wholesale BOP'),
professional('professional-services-insurance', 'Errors & Omissions (E&O)');
final String slug;
final String displayName;
const HiTechInsuranceType(this.slug, this.displayName);
}
Native Widget Implementation
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HiTechInsuranceWidget extends StatelessWidget {
final HiTechInsuranceType insuranceType;
final String partnerUtm;
final bool isDark;
final String? customCta;
final VoidCallback? onBeforeLaunch;
const HiTechInsuranceWidget({
Key? key,
this.insuranceType = HiTechInsuranceType.truck,
required this.partnerUtm,
this.isDark = true,
this.customCta,
this.onBeforeLaunch,
}) : super(key: key);
Future<void> _launchQuoteFunnel() async {
if (onBeforeLaunch != null) {
onBeforeLaunch!();
}
final uri = Uri.parse(
'https://hitechinsurance.ai/en/insurance/${insuranceType.slug}'
'?utm_source=${Uri.encodeComponent(partnerUtm)}'
'&utm_medium=flutter_widget'
'&utm_campaign=partner_referral',
);
if (await canLaunchUrl(uri)) {
await launchUrl(uri, mode: LaunchMode.externalApplication);
}
}
Widget build(BuildContext context) {
final bgColor = isDark ? const Color(0xFF0F172A) : const Color(0xFFFFFFFF);
final borderColor = isDark ? const Color(0x26FFFFFF) : const Color(0xFFE2E8F0);
final textColor = isDark ? Colors.white : const Color(0xFF0F172A);
final subtitleColor = isDark ? const Color(0xFF94A3B8) : const Color(0xFF64748B);
return InkWell(
onTap: _launchQuoteFunnel,
borderRadius: BorderRadius.circular(16),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: bgColor,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: borderColor, width: 1),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(isDark ? 0.4 : 0.05),
offset: const Offset(0, 4),
blurRadius: 16,
),
],
),
child: Row(
children: [
// Shield Icon / Logo Container
Container(
width: 38,
height: 38,
decoration: BoxDecoration(
color: isDark ? const Color(0xFF1E293B) : const Color(0xFFF1F5F9),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isDark ? const Color(0x1FFFFFFF) : const Color(0x0F000000),
),
),
child: const Icon(
Icons.verified_user_rounded,
color: Color(0xFFFF763C),
size: 20,
),
),
const SizedBox(width: 12),
// Text Metadata Column
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Text(
'HiTech Insurance',
style: TextStyle(
color: textColor,
fontWeight: FontWeight.w700,
fontSize: 13,
),
),
const SizedBox(width: 6),
Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
decoration: BoxDecoration(
color: const Color(0xFFFF763C).withOpacity(0.15),
borderRadius: BorderRadius.circular(99),
border: Border.all(
color: const Color(0xFFFF763C).withOpacity(0.3),
),
),
child: const Text(
'VERIFIED',
style: TextStyle(
color: Color(0xFFFF763C),
fontSize: 8,
fontWeight: FontWeight.bold,
),
),
),
],
),
const SizedBox(height: 2),
Text(
insuranceType.displayName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: subtitleColor,
fontSize: 11,
),
),
],
),
),
const SizedBox(width: 12),
// Call to Action Button
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFFFF763C), Color(0xFFFF5722)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(9),
boxShadow: [
BoxShadow(
color: const Color(0xFFFF763C).withOpacity(0.35),
offset: const Offset(0, 3),
blurRadius: 8,
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
customCta ?? 'Get Quote',
style: const TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 4),
const Icon(Icons.arrow_forward_rounded, color: Colors.white, size: 12),
],
),
),
],
),
),
);
}
}
Comparison Matrix
| Capability | Approach A (WebView) | Approach B (Pure Dart Widget) |
|---|---|---|
| Framerate | WebKit/Blink (variable) | Solid 60 / 120 FPS native |
| Cold Start Latency | Network load roundtrip (~200ms) | Instantaneous (0ms) |
| Offline Resilience | Shows browser network error | Shows native cached UI |
| App Bundle Impact | Requires webview_flutter plugin | Tiny zero-dependency Dart file |
| Maintenance | Auto-updates when web app updates | Updates via app store release |