Flutter-Leitfaden

Binden Sie das Widget in Ihre Flutter-App ein, indem Sie das flutter_inappwebview Package nutzen. Perfekt für einheitliche Erlebnisse auf Mobile, Web und Desktop.

✓

Hybrid Composition

Garantiert korrektes Rendering auf Android.

✓

Kein Native Code

Alles wird direkt in Dart gehandhabt.

Dart-Code

Zurück zum Konfigurator

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,
        ),
      ),
    );
  }
}

Benötigte Abhängigkeit: Fügen Sie flutter_inappwebview zu Ihrer pubspec.yaml hinzu.