Skip to content

Commit 4b69eae

Browse files
mar-haimar-hai
committed
add complete example application instead of sentry example app adaptation
1 parent 407ad91 commit 4b69eae

File tree

2 files changed

+112
-106
lines changed

2 files changed

+112
-106
lines changed

‎docs/platforms/flutter/troubleshooting.mdx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,18 +78,27 @@ To prevent the `WidgetsBindingIntegration` from loading by default, you will nee
7878
// ignore: implementation_imports
7979
import 'package:sentry_flutter/src/integrations/widgets_binding_integration.dart';
8080
...
81-
final integration = options.integrations.firstWhere(
82-
(element) => element is WidgetsBindingIntegration);
83-
options.removeIntegration(integration);
81+
SentryFlutter.init(
82+
(options) {
83+
...
84+
final integration = options.integrations
85+
.firstWhere((element) => element is WidgetsBindingIntegration);
86+
options.removeIntegration(integration);
87+
},
88+
// Init your App.
89+
appRunner: appRunner,
90+
);
8491
```
8592

86-
### Enable multi-view in the example app
93+
### Example application using the multi-view feature with the sentry plugin
8794

88-
To make the [sentry flutter example app](https://github.com/getsentry/sentry-dart/tree/main/flutter/example) `multi-view` ready, you will need to modify the `main.dart` and create the `multi_view_app.dart` file next to the `main.dart` and insert the content from the [docs](https://docs.flutter.dev/platform-integration/web/embedding-flutter-web#handling-view-changes-from-dart).
89-
Modify the `index.html`in the `web` directory and add the `flutter_bootstrap.js` file.
95+
Below is the code for an **example application** using the **multi-view** feature in combination with the **sentry plugin**.
9096

91-
Also note the `NavigatorKey` in the `MaterialApp` widget. This key is a single `GlobalKey` in the `example app` and therefore doesn't support multiple instances. If you rely on this `NavigatorKey` you will need to handle multiple `Keys` and pass them to the appropriate view/instance. For simplicity, we will not use the `NavigatorKey` in the following example.
97+
Copy the `main.dart` into the `lib` folder of your existing project. This file already contains the code of the `multi_view_app.dart` from the [`flutter documentation`](https://docs.flutter.dev/platform-integration/web/embedding-flutter-web#handling-view-changes-from-dart).
98+
Next, copy the `flutter_bootstrap.js` and the `index.html` into the `web` folder.
9299

93-
Now you should be able to see 2 instances of the same application side by side, with different ViewIds in the `AppBar`.
100+
Make sure you are using **Flutter 3.24** or newer and run the application.
101+
102+
Now you should be able to see **2** instances of the same application side by side, with different **ViewIds** in the `body`.
94103

95104
<Include name="troubleshooting/flutter/enable_multi_view.mdx" />

‎includes/troubleshooting/flutter/enable_multi_view.mdx

Lines changed: 95 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,64 @@
1-
```dart {filename:multi_view_app.dart}{tabTitle: multi_view_app.dart}
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+
// ATTENTION: Change the DSN below with your own to see the events in Sentry. Get one at sentry.io
9+
const String exampleDsn =
10+
'https://[email protected]/5428562';
11+
12+
Future<void> main() async {
13+
await SentryFlutter.init(
14+
(options) {
15+
options.dsn = exampleDsn;
16+
final integration = options.integrations
17+
.firstWhere((element) => element is WidgetsBindingIntegration);
18+
options.removeIntegration(integration);
19+
},
20+
// Init your App.
21+
appRunner: () => runWidget(
22+
MultiViewApp(
23+
viewBuilder: (BuildContext context) => DefaultAssetBundle(
24+
bundle: SentryAssetBundle(),
25+
child: const MyApp(),
26+
),
27+
),
28+
),
29+
);
30+
}
31+
32+
class MyApp extends StatefulWidget {
33+
const MyApp({super.key});
34+
35+
@override
36+
State<MyApp> createState() => _MyAppState();
37+
}
38+
39+
class _MyAppState extends State<MyApp> {
40+
@override
41+
Widget build(BuildContext context) {
42+
return MaterialApp(
43+
navigatorObservers: [
44+
SentryNavigatorObserver(),
45+
],
46+
home: Scaffold(
47+
body: Center(
48+
child: Text(
49+
'Sentry Flutter Example (ViewId:${View.of(context).viewId})'),
50+
),
51+
),
52+
);
53+
}
54+
}
55+
256
// multi_view_app.dart
357
458
// Copyright 2014 The Flutter Authors. All rights reserved.
559
// Use of this source code is governed by a BSD-style license that can be
660
// found in the LICENSE file.
761
8-
import 'dart:ui' show FlutterView;
9-
import 'package:flutter/widgets.dart';
10-
1162
/// Calls [viewBuilder] for every view added to the app to obtain the widget to
1263
/// render into that view. The current view can be looked up with [View.of].
1364
class MultiViewApp extends StatefulWidget {
@@ -77,98 +128,7 @@ class _MultiViewAppState extends State<MultiViewApp>
77128
}
78129
```
79130

80-
```dart {filename:main.dart}{tabTitle: main.dart}
81-
import 'multi_view_app.dart';
82-
import 'package:sentry_flutter/src/integrations/widgets_binding_integration.dart';
83-
84-
...
85-
86-
Future<void> main() async {
87-
await setupSentry(
88-
() => runWidget(
89-
MultiViewApp(
90-
viewBuilder: (BuildContext context) => DefaultAssetBundle(
91-
bundle: SentryAssetBundle(),
92-
child: const MyApp(),
93-
),
94-
),
95-
),
96-
exampleDsn,
97-
);
98-
}
99-
100-
Future<void> setupSentry(
101-
...
102-
}) async {
103-
await SentryFlutter.init(
104-
(options) {
105-
...
106-
final integration = options.integrations
107-
.firstWhere((element) => element is WidgetsBindingIntegration);
108-
options.removeIntegration(integration);
109-
},
110-
// Init your App.
111-
appRunner: appRunner,
112-
);
113-
}
114-
115-
class MyApp extends StatefulWidget {
116-
const MyApp({super.key});
117-
118-
@override
119-
_MyAppState createState() => _MyAppState();
120-
}
121-
122-
class _MyAppState extends State<MyApp> {
123-
@override
124-
Widget build(BuildContext context) {
125-
return feedback.BetterFeedback(
126-
child: ChangeNotifierProvider<ThemeProvider>(
127-
create: (_) => ThemeProvider(),
128-
child: Builder(
129-
builder: (context) => MaterialApp(
130-
navigatorObservers: [
131-
SentryNavigatorObserver(),
132-
],
133-
theme: Provider.of<ThemeProvider>(context).theme,
134-
home: const MainScaffold(),
135-
),
136-
),
137-
),
138-
);
139-
}
140-
}
141-
142-
...
143-
144-
145-
class MainScaffold extends StatelessWidget {
146-
...
147-
148-
@override
149-
Widget build(BuildContext context) {
150-
...
151-
return Scaffold(
152-
appBar: AppBar(
153-
title:
154-
Text('Sentry Flutter Example (ViewId:${View.of(context).viewId})'),
155-
actions: [
156-
...
157-
],
158-
),
159-
body: SingleChildScrollView(
160-
...
161-
),
162-
);
163-
}
164-
165-
...
166-
}
167-
168-
169-
```
170-
171-
```js {filename:flutter_bootstrap.js}{tabTitle: flutter_bootstrap.js}
131+
```js {filename:flutter_bootstrap.js}{tabTitle: web/flutter_bootstrap.js}
172132
// flutter_bootstrap.js
173133
{{ flutter_js; }}
174134
{{ flutter_build_config; }}
@@ -186,10 +146,47 @@ _flutter.loader.load({
186146
});
187147
```
188148

189-
```html {filename:index.html}{tabTitle: index.html}
149+
```html {filename:index.html}{tabTitle: web/index.html}
190150
<!doctype html>
191151
<html>
192-
...
152+
<head>
153+
<!--
154+
If you are serving your web app in a path other than the root, change the
155+
href value below to reflect the base path you are serving from.
156+
157+
The path provided below has to start and end with a slash "/" in order for
158+
it to work correctly.
159+
160+
For more details:
161+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
162+
163+
This is a placeholder for base href that will be replaced by the value of
164+
the `--base-href` argument provided to `flutter build`.
165+
-->
166+
<base href="$FLUTTER_BASE_HREF" />
167+
168+
<meta charset="UTF-8" />
169+
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
170+
<meta
171+
name="description"
172+
content="Demonstrates how to use the multiview feature with the sentry plugin."
173+
/>
174+
175+
<!-- iOS meta tags & icons -->
176+
<meta name="apple-mobile-web-app-capable" content="yes" />
177+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
178+
<meta
179+
name="apple-mobile-web-app-title"
180+
content="sentry multiview example"
181+
/>
182+
<link rel="apple-touch-icon" href="icons/Icon-192.png" />
183+
184+
<!-- Favicon -->
185+
<link rel="shortcut icon" type="image/png" href="favicon.png" />
186+
187+
<title>sentry multiview example</title>
188+
<link rel="manifest" href="manifest.json" />
189+
</head>
193190
<body>
194191
<div style="width: 100%; height: 100%; position: absolute;">
195192
<div id="left" style="width: 50%; height: 100%; float: left;"></div>

0 commit comments

Comments
 (0)