Skip to content

Commit d11a224

Browse files
devoncarewdevoncarew
authored
implement an embedded mode for the flutter web UI (#2701)
1 parent 8269561 commit d11a224

File tree

2 files changed

+94
-45
lines changed

2 files changed

+94
-45
lines changed

‎pkgs/sketch_pad/lib/main.dart

Lines changed: 54 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ GoRouter _createRouter() {
7474
final sampleParam = state.uri.queryParameters['sample'];
7575
final themeParam = state.uri.queryParameters['theme'] ?? 'dark';
7676
final channelParam = state.uri.queryParameters['channel'];
77+
final embedMode = state.uri.queryParameters['embed'] == 'true';
7778

7879
final bool darkMode = themeParam == 'dark';
7980
final colorScheme = ColorScheme.fromSwatch(
@@ -94,6 +95,7 @@ GoRouter _createRouter() {
9495
child: DartPadMainPage(
9596
title: appName,
9697
initialChannel: channelParam,
98+
embedMode: embedMode,
9799
sampleId: sampleParam,
98100
gistId: idParam,
99101
),
@@ -109,10 +111,12 @@ class DartPadMainPage extends StatefulWidget {
109111
final String? initialChannel;
110112
final String? sampleId;
111113
final String? gistId;
114+
final bool embedMode;
112115

113116
DartPadMainPage({
114117
required this.title,
115118
required this.initialChannel,
119+
required this.embedMode,
116120
this.sampleId,
117121
this.gistId,
118122
}) : super(key: ValueKey('sample:$sampleId gist:$gistId'));
@@ -122,8 +126,7 @@ class DartPadMainPage extends StatefulWidget {
122126
}
123127

124128
class _DartPadMainPageState extends State<DartPadMainPage> {
125-
final SplitViewController mainSplitter =
126-
SplitViewController(weights: [0.50, 0.50]);
129+
late final SplitViewController mainSplitter;
127130

128131
late AppModel appModel;
129132
late AppServices appServices;
@@ -132,6 +135,10 @@ class _DartPadMainPageState extends State<DartPadMainPage> {
132135
void initState() {
133136
super.initState();
134137

138+
final leftPanelSize = widget.embedMode ? 0.62 : 0.50;
139+
mainSplitter =
140+
SplitViewController(weights: [leftPanelSize, 1.0 - leftPanelSize]);
141+
135142
final channel = widget.initialChannel != null
136143
? Channel.channelForName(widget.initialChannel!)
137144
: null;
@@ -164,52 +171,54 @@ class _DartPadMainPageState extends State<DartPadMainPage> {
164171
final theme = Theme.of(context);
165172

166173
final scaffold = Scaffold(
167-
appBar: AppBar(
168-
title: SizedBox(
169-
height: toolbarItemHeight,
170-
child: Row(
171-
children: [
172-
dartLogo(width: 32),
173-
const SizedBox(width: denseSpacing),
174-
const Text(appName),
175-
const SizedBox(width: defaultSpacing * 4),
176-
NewSnippetWidget(appServices: appServices),
177-
const SizedBox(width: denseSpacing),
178-
const ListSamplesWidget(),
179-
const SizedBox(width: defaultSpacing),
180-
// title widget
181-
Expanded(
182-
child: Center(
183-
child: ValueBuilder(
184-
appModel.title,
185-
(String value) => Text(value),
186-
),
174+
appBar: widget.embedMode
175+
? null
176+
: AppBar(
177+
title: SizedBox(
178+
height: toolbarItemHeight,
179+
child: Row(
180+
children: [
181+
dartLogo(width: 32),
182+
const SizedBox(width: denseSpacing),
183+
const Text(appName),
184+
const SizedBox(width: defaultSpacing * 4),
185+
NewSnippetWidget(appServices: appServices),
186+
const SizedBox(width: denseSpacing),
187+
const ListSamplesWidget(),
188+
const SizedBox(width: defaultSpacing),
189+
// title widget
190+
Expanded(
191+
child: Center(
192+
child: ValueBuilder(
193+
appModel.title,
194+
(String value) => Text(value),
195+
),
196+
),
197+
),
198+
const SizedBox(width: defaultSpacing),
199+
],
187200
),
188201
),
189-
const SizedBox(width: defaultSpacing),
190-
],
191-
),
192-
),
193-
actions: [
194-
// install sdk
195-
TextButton(
196-
onPressed: () {
197-
url_launcher.launchUrl(
198-
Uri.parse('https://docs.flutter.dev/get-started/install'),
199-
);
200-
},
201-
child: const Row(
202-
children: [
203-
Text('Install SDK'),
204-
SizedBox(width: denseSpacing),
205-
Icon(Icons.launch, size: smallIconSize),
202+
actions: [
203+
// install sdk
204+
TextButton(
205+
onPressed: () {
206+
url_launcher.launchUrl(
207+
Uri.parse('https://docs.flutter.dev/get-started/install'),
208+
);
209+
},
210+
child: const Row(
211+
children: [
212+
Text('Install SDK'),
213+
SizedBox(width: denseSpacing),
214+
Icon(Icons.launch, size: smallIconSize),
215+
],
216+
),
217+
),
218+
const SizedBox(width: denseSpacing),
219+
const OverflowMenu(),
206220
],
207221
),
208-
),
209-
const SizedBox(width: denseSpacing),
210-
const OverflowMenu(),
211-
],
212-
),
213222
body: Column(
214223
children: [
215224
Expanded(
@@ -350,7 +359,7 @@ class _DartPadMainPageState extends State<DartPadMainPage> {
350359
),
351360
),
352361
),
353-
const StatusLineWidget(),
362+
if (!widget.embedMode) const StatusLineWidget(),
354363
],
355364
),
356365
);

‎pkgs/sketch_pad/web/embed_demo.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
3+
<!-- Copyright (c) 2023, the Dart project authors. Please see the AUTHORS file
4+
for details. All rights reserved. Use of this source code is governed by a
5+
BSD-style license that can be found in the LICENSE file. -->
6+
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8">
10+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
12+
13+
<title>Embeddings Demo</title>
14+
15+
<style>
16+
body {
17+
font-size: 16px;
18+
}
19+
20+
iframe {
21+
border: 1px solid #ccc;
22+
width: 880px;
23+
height: 480px;
24+
margin: 0 20px 20px 20px;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<div>
31+
<h2>DartPad's Embedded UI</h2>
32+
33+
<h3>Flutter Web UI</h3>
34+
<iframe src="https://preview.dartpad.dev?embed=true&sample=counter"></iframe>
35+
36+
<h3>Flutter Web UI (light)</h3>
37+
<iframe src="https://preview.dartpad.dev?embed=true&theme=light&sample=counter"></iframe>
38+
</div>
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)