Skip to content

Commit

Permalink
implement an embedded mode for the flutter web UI (#2701)
Browse files Browse the repository at this point in the history
  • Loading branch information
@devoncarew
devoncarew authored Nov 2, 2023
1 parent 8269561 commit d11a224
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 45 deletions.
99 changes: 54 additions & 45 deletions pkgs/sketch_pad/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ GoRouter _createRouter() {
final sampleParam = state.uri.queryParameters['sample'];
final themeParam = state.uri.queryParameters['theme'] ?? 'dark';
final channelParam = state.uri.queryParameters['channel'];
final embedMode = state.uri.queryParameters['embed'] == 'true';

final bool darkMode = themeParam == 'dark';
final colorScheme = ColorScheme.fromSwatch(
Expand All @@ -94,6 +95,7 @@ GoRouter _createRouter() {
child: DartPadMainPage(
title: appName,
initialChannel: channelParam,
embedMode: embedMode,
sampleId: sampleParam,
gistId: idParam,
),
Expand All @@ -109,10 +111,12 @@ class DartPadMainPage extends StatefulWidget {
final String? initialChannel;
final String? sampleId;
final String? gistId;
final bool embedMode;

DartPadMainPage({
required this.title,
required this.initialChannel,
required this.embedMode,
this.sampleId,
this.gistId,
}) : super(key: ValueKey('sample:$sampleId gist:$gistId'));
Expand All @@ -122,8 +126,7 @@ class DartPadMainPage extends StatefulWidget {
}

class _DartPadMainPageState extends State<DartPadMainPage> {
final SplitViewController mainSplitter =
SplitViewController(weights: [0.50, 0.50]);
late final SplitViewController mainSplitter;

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

final leftPanelSize = widget.embedMode ? 0.62 : 0.50;
mainSplitter =
SplitViewController(weights: [leftPanelSize, 1.0 - leftPanelSize]);

final channel = widget.initialChannel != null
? Channel.channelForName(widget.initialChannel!)
: null;
Expand Down Expand Up @@ -164,52 +171,54 @@ class _DartPadMainPageState extends State<DartPadMainPage> {
final theme = Theme.of(context);

final scaffold = Scaffold(
appBar: AppBar(
title: SizedBox(
height: toolbarItemHeight,
child: Row(
children: [
dartLogo(width: 32),
const SizedBox(width: denseSpacing),
const Text(appName),
const SizedBox(width: defaultSpacing * 4),
NewSnippetWidget(appServices: appServices),
const SizedBox(width: denseSpacing),
const ListSamplesWidget(),
const SizedBox(width: defaultSpacing),
// title widget
Expanded(
child: Center(
child: ValueBuilder(
appModel.title,
(String value) => Text(value),
),
appBar: widget.embedMode
? null
: AppBar(
title: SizedBox(
height: toolbarItemHeight,
child: Row(
children: [
dartLogo(width: 32),
const SizedBox(width: denseSpacing),
const Text(appName),
const SizedBox(width: defaultSpacing * 4),
NewSnippetWidget(appServices: appServices),
const SizedBox(width: denseSpacing),
const ListSamplesWidget(),
const SizedBox(width: defaultSpacing),
// title widget
Expanded(
child: Center(
child: ValueBuilder(
appModel.title,
(String value) => Text(value),
),
),
),
const SizedBox(width: defaultSpacing),
],
),
),
const SizedBox(width: defaultSpacing),
],
),
),
actions: [
// install sdk
TextButton(
onPressed: () {
url_launcher.launchUrl(
Uri.parse('https://docs.flutter.dev/get-started/install'),
);
},
child: const Row(
children: [
Text('Install SDK'),
SizedBox(width: denseSpacing),
Icon(Icons.launch, size: smallIconSize),
actions: [
// install sdk
TextButton(
onPressed: () {
url_launcher.launchUrl(
Uri.parse('https://docs.flutter.dev/get-started/install'),
);
},
child: const Row(
children: [
Text('Install SDK'),
SizedBox(width: denseSpacing),
Icon(Icons.launch, size: smallIconSize),
],
),
),
const SizedBox(width: denseSpacing),
const OverflowMenu(),
],
),
),
const SizedBox(width: denseSpacing),
const OverflowMenu(),
],
),
body: Column(
children: [
Expanded(
Expand Down Expand Up @@ -350,7 +359,7 @@ class _DartPadMainPageState extends State<DartPadMainPage> {
),
),
),
const StatusLineWidget(),
if (!widget.embedMode) const StatusLineWidget(),
],
),
);
Expand Down
40 changes: 40 additions & 0 deletions pkgs/sketch_pad/web/embed_demo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>

<!-- Copyright (c) 2023, the Dart project authors. Please see the AUTHORS file
for details. All rights reserved. Use of this source code is governed by a
BSD-style license that can be found in the LICENSE file. -->

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Embeddings Demo</title>

<style>
body {
font-size: 16px;
}

iframe {
border: 1px solid #ccc;
width: 880px;
height: 480px;
margin: 0 20px 20px 20px;
}
</style>
</head>

<body>
<div>
<h2>DartPad's Embedded UI</h2>

<h3>Flutter Web UI</h3>
<iframe src="https://preview.dartpad.dev?embed=true&sample=counter"></iframe>

<h3>Flutter Web UI (light)</h3>
<iframe src="https://preview.dartpad.dev?embed=true&theme=light&sample=counter"></iframe>
</div>
</body>
</html>

0 comments on commit d11a224

Please sign in to comment.