Flutter Guide

Embed the widget in your Flutter application using the flutter_inappwebview package. Perfect for creating unified experiences across mobile, web, and desktop.

✓

Hybrid Composition

Ensures correct rendering on Android.

✓

No Native Code

Everything is handled in Dart.

Dart Code

Back to Configurator

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class CalendarWeekWidget extends StatelessWidget {
  const CalendarWeekWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final String html = '''
      <!DOCTYPE html>
      <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
          body { margin: 0; padding: 16px; }
        </style>
      </head>
      <body>
        <div class="tcw-embed" data-design="dashboard" data-variant="weekdays"></div>
        <script src="https://thecalendarweek.com/embed.js" async></script>
      </body>
      </html>
    ''';

    return InAppWebView(
      initialData: InAppWebViewInitialData(data: html),
      initialOptions: InAppWebViewGroupOptions(
        crossPlatform: InAppWebViewOptions(
          javaScriptEnabled: true,
        ),
      ),
    );
  }
}

Dependency Required: Add flutter_inappwebview to your pubspec.yaml.