|
| 1 | +```dart {filename:main.dart}{tabTitle: lib/main.dart} |
| 2 | +import 'dart:async'; |
| 3 | +import 'package:flutter/material.dart'; |
| 4 | +import 'package:sentry_flutter/sentry_flutter.dart'; |
| 5 | +import 'package:sentry_flutter/src/integrations/widgets_binding_integration.dart'; |
| 6 | +import 'dart:ui' show FlutterView; |
| 7 | +
|
| 8 | +const String exampleDsn = '___DSN___'; |
| 9 | +
|
| 10 | +Future<void> main() async { |
| 11 | + await SentryFlutter.init( |
| 12 | + (options) { |
| 13 | + options.dsn = exampleDsn; |
| 14 | + final integration = options.integrations |
| 15 | + .firstWhere((element) => element is WidgetsBindingIntegration); |
| 16 | + options.removeIntegration(integration); |
| 17 | + }, |
| 18 | + // Init your App. |
| 19 | + appRunner: () => runWidget( |
| 20 | + MultiViewApp( |
| 21 | + viewBuilder: (BuildContext context) => DefaultAssetBundle( |
| 22 | + bundle: SentryAssetBundle(), |
| 23 | + child: const MyApp(), |
| 24 | + ), |
| 25 | + ), |
| 26 | + ), |
| 27 | + ); |
| 28 | +} |
| 29 | +
|
| 30 | +class MyApp extends StatefulWidget { |
| 31 | + const MyApp({super.key}); |
| 32 | +
|
| 33 | + @override |
| 34 | + State<MyApp> createState() => _MyAppState(); |
| 35 | +} |
| 36 | +
|
| 37 | +class _MyAppState extends State<MyApp> { |
| 38 | + @override |
| 39 | + Widget build(BuildContext context) { |
| 40 | + return MaterialApp( |
| 41 | + navigatorObservers: [ |
| 42 | + SentryNavigatorObserver(), |
| 43 | + ], |
| 44 | + home: Scaffold( |
| 45 | + body: Center( |
| 46 | + child: Text( |
| 47 | + 'Sentry Flutter Example (ViewId:${View.of(context).viewId})'), |
| 48 | + ), |
| 49 | + ), |
| 50 | + ); |
| 51 | + } |
| 52 | +} |
| 53 | +
|
| 54 | +// multi_view_app.dart |
| 55 | +
|
| 56 | +// Copyright 2014 The Flutter Authors. All rights reserved. |
| 57 | +// Use of this source code is governed by a BSD-style license that can be |
| 58 | +// found in the LICENSE file. |
| 59 | +
|
| 60 | +/// Calls [viewBuilder] for every view added to the app to obtain the widget to |
| 61 | +/// render into that view. The current view can be looked up with [View.of]. |
| 62 | +class MultiViewApp extends StatefulWidget { |
| 63 | + const MultiViewApp({super.key, required this.viewBuilder}); |
| 64 | +
|
| 65 | + final WidgetBuilder viewBuilder; |
| 66 | +
|
| 67 | + @override |
| 68 | + State<MultiViewApp> createState() => _MultiViewAppState(); |
| 69 | +} |
| 70 | +
|
| 71 | +class _MultiViewAppState extends State<MultiViewApp> |
| 72 | + with WidgetsBindingObserver { |
| 73 | + @override |
| 74 | + void initState() { |
| 75 | + super.initState(); |
| 76 | + WidgetsBinding.instance.addObserver(this); |
| 77 | + _updateViews(); |
| 78 | + } |
| 79 | +
|
| 80 | + @override |
| 81 | + void didUpdateWidget(MultiViewApp oldWidget) { |
| 82 | + super.didUpdateWidget(oldWidget); |
| 83 | + // Need to re-evaluate the viewBuilder callback for all views. |
| 84 | + _views.clear(); |
| 85 | + _updateViews(); |
| 86 | + } |
| 87 | +
|
| 88 | + @override |
| 89 | + void didChangeMetrics() { |
| 90 | + _updateViews(); |
| 91 | + } |
| 92 | +
|
| 93 | + Map<Object, Widget> _views = <Object, Widget>{}; |
| 94 | +
|
| 95 | + void _updateViews() { |
| 96 | + final Map<Object, Widget> newViews = <Object, Widget>{}; |
| 97 | + for (final FlutterView view |
| 98 | + in WidgetsBinding.instance.platformDispatcher.views) { |
| 99 | + final Widget viewWidget = _views[view.viewId] ?? _createViewWidget(view); |
| 100 | + newViews[view.viewId] = viewWidget; |
| 101 | + } |
| 102 | + setState(() { |
| 103 | + _views = newViews; |
| 104 | + }); |
| 105 | + } |
| 106 | +
|
| 107 | + Widget _createViewWidget(FlutterView view) { |
| 108 | + return View( |
| 109 | + view: view, |
| 110 | + child: Builder( |
| 111 | + builder: widget.viewBuilder, |
| 112 | + ), |
| 113 | + ); |
| 114 | + } |
| 115 | +
|
| 116 | + @override |
| 117 | + void dispose() { |
| 118 | + WidgetsBinding.instance.removeObserver(this); |
| 119 | + super.dispose(); |
| 120 | + } |
| 121 | +
|
| 122 | + @override |
| 123 | + Widget build(BuildContext context) { |
| 124 | + return ViewCollection(views: _views.values.toList(growable: false)); |
| 125 | + } |
| 126 | +} |
| 127 | +``` |
| 128 | + |
| 129 | +```js {filename:flutter_bootstrap.js}{tabTitle: web/flutter_bootstrap.js} |
| 130 | +// flutter_bootstrap.js |
| 131 | +{{ flutter_js; }} |
| 132 | +{{ flutter_build_config; }} |
| 133 | + |
| 134 | +_flutter.loader.load({ |
| 135 | + onEntrypointLoaded: async function onEntrypointLoaded(engineInitializer) { |
| 136 | + let engine = await engineInitializer.initializeEngine({ |
| 137 | + multiViewEnabled: true, // Enables embedded mode. |
| 138 | + }); |
| 139 | + let app = await engine.runApp(); |
| 140 | + // Make this `app` object available to your JS app. |
| 141 | + app.addView({ hostElement: document.querySelector("#left") }); |
| 142 | + app.addView({ hostElement: document.querySelector("#right") }); |
| 143 | + }, |
| 144 | +}); |
| 145 | +``` |
| 146 | + |
| 147 | +```html {filename:index.html}{tabTitle: web/index.html} |
| 148 | +<!doctype html> |
| 149 | +<html> |
| 150 | + <head> |
| 151 | + <!-- |
| 152 | + If you're serving your web app in a path other than the root, change the |
| 153 | + href value below to reflect the base path you're serving from. |
| 154 | +
|
| 155 | + The path provided below has to start and end with a slash "/" in order for |
| 156 | + it to work correctly. |
| 157 | +
|
| 158 | + For more details: |
| 159 | + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base |
| 160 | +
|
| 161 | + This is a placeholder for base href that will be replaced by the value of |
| 162 | + the `--base-href` argument provided to `flutter build`. |
| 163 | + --> |
| 164 | + <base href="$FLUTTER_BASE_HREF" /> |
| 165 | + |
| 166 | + <meta charset="UTF-8" /> |
| 167 | + <meta content="IE=Edge" http-equiv="X-UA-Compatible" /> |
| 168 | + <meta |
| 169 | + name="description" |
| 170 | + content="Demonstrates how to use the multiview feature with the sentry plugin." |
| 171 | + /> |
| 172 | + |
| 173 | + <!-- iOS meta tags & icons --> |
| 174 | + <meta name="apple-mobile-web-app-capable" content="yes" /> |
| 175 | + <meta name="apple-mobile-web-app-status-bar-style" content="black" /> |
| 176 | + <meta |
| 177 | + name="apple-mobile-web-app-title" |
| 178 | + content="sentry multiview example" |
| 179 | + /> |
| 180 | + <link rel="apple-touch-icon" href="icons/Icon-192.png" /> |
| 181 | + |
| 182 | + <!-- Favicon --> |
| 183 | + <link rel="shortcut icon" type="image/png" href="favicon.png" /> |
| 184 | + |
| 185 | + <title>sentry multiview example</title> |
| 186 | + <link rel="manifest" href="manifest.json" /> |
| 187 | + </head> |
| 188 | + <body> |
| 189 | + <div style="width: 100%; height: 100%; position: absolute;"> |
| 190 | + <div id="left" style="width: 50%; height: 100%; float: left;"></div> |
| 191 | + <div id="right" style="width: 50%; height: 100%; float: left;"></div> |
| 192 | + </div> |
| 193 | + <script |
| 194 | + src="flutter_bootstrap.js" |
| 195 | + type="application/javascript" |
| 196 | + async |
| 197 | + ></script> |
| 198 | + </body> |
| 199 | +</html> |
| 200 | +``` |
0 commit comments