Skip to content

Possibility of a Toolbar Menu on the Right and Left #260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Possibility of a Toolbar Menu on the Right and Left #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fff209d
incluir a posibilidade de ter toolbar de ambos os lados e poder ocult…
jheime-avenue Mar 6, 2025
48da552
incluir a posibilidade de ter toolbar de ambos os lados e poder ocult…
jheime-avenue Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .idea/.gitignore
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

527 changes: 527 additions & 0 deletions .idea/caches/deviceStreaming.xml
View file
Open in desktop

Large diffs are not rendered by default.

34 changes: 34 additions & 0 deletions .idea/flutter_device_preview.iml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/git_toolbox_blame.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions .idea/git_toolbox_prj.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/misc.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions .idea/modules.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/vcs.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions device_preview/lib/device_preview.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,4 @@ export 'src/views/tool_panel/sections/device.dart';
export 'src/views/tool_panel/sections/section.dart';
export 'src/views/tool_panel/sections/settings.dart';
export 'src/views/tool_panel/sections/system.dart';
export 'src/model/tools_panel_model.dart';
102 changes: 70 additions & 32 deletions device_preview/lib/src/device_preview.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'dart:async';
import 'dart:ui' as ui;

import 'package:device_frame/device_frame.dart';
import 'package:device_preview/src/model/tools_panel_model.dart';
import 'package:device_preview/src/state/state.dart';
import 'package:device_preview/src/state/store.dart';
import 'package:device_preview/src/storage/storage.dart';
Expand All @@ -12,7 +13,6 @@ import 'package:device_preview/src/views/tool_panel/sections/accessibility.dart'
import 'package:device_preview/src/views/tool_panel/sections/device.dart';
import 'package:device_preview/src/views/tool_panel/sections/settings.dart';
import 'package:device_preview/src/views/tool_panel/sections/system.dart';
import 'package:device_preview/src/views/tool_panel/tool_panel.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
Expand Down Expand Up @@ -49,18 +49,24 @@ import 'views/small.dart';
class DevicePreview extends StatefulWidget {
/// Create a new [DevicePreview].
const DevicePreview({
Key? key,
super.key,
required this.builder,
this.devices,
this.data,
this.isToolbarVisible = true,
this.availableLocales,
this.defaultDevice,
@Deprecated(
'Use toolsLeft and toolsRight instead. '
'This variable will be removed in a future release. ',
)
this.tools = defaultTools,
this.toolsPanelLeft,
this.toolsPanelRight,
this.storage,
this.enabled = true,
this.backgroundColor,
}) : super(key: key);
});

/// If not [enabled], the [child] is used directly.
final bool enabled;
Expand All @@ -87,11 +93,22 @@ class DevicePreview extends StatefulWidget {
/// The available devices used for previewing.
final List<DeviceInfo>? devices;

/// The list of available tools.
///
/// All the tools must be [Sliver]s and will be added to the menu.
@Deprecated(
'Use toolsPanelLeft and toolsPanelRight instead. '
'This variable will be removed in a future release.',
)
final List<Widget> tools;

/// List of tools on the left side.
///
/// All tools must be [Sliver]s and will be added to the left menu.
final ToolsPanelModel? toolsPanelLeft;

/// List of tools on the right side.
///
/// All tools must be [Sliver]s and will be added to the right menu.
final ToolsPanelModel? toolsPanelRight;

/// The available locales.
final List<Locale>? availableLocales;

Expand Down Expand Up @@ -227,7 +244,7 @@ class DevicePreview extends StatefulWidget {
}) {
final store = Provider.of<DevicePreviewStore>(context);
store.data = store.data.copyWith(
isToolbarVisible: true,
isToolbarVisibleRight: true,
isEnabled: enablePreview,
);
}
Expand All @@ -242,7 +259,7 @@ class DevicePreview extends StatefulWidget {
}) {
final store = Provider.of<DevicePreviewStore>(context);
store.data = store.data.copyWith(
isToolbarVisible: false,
isToolbarVisibleRight: false,
isEnabled: !disablePreview,
);
}
Expand Down Expand Up @@ -349,6 +366,9 @@ class DevicePreview extends StatefulWidget {
class _DevicePreviewState extends State<DevicePreview> {
bool _isToolPanelPopOverOpen = false;

late ToolsPanelModel _toolsPanelLeft;
late ToolsPanelModel _toolsPanelRight;

late DevicePreviewStorage storage =
widget.storage ?? DevicePreviewStorage.preferences();

Expand Down Expand Up @@ -383,6 +403,10 @@ class _DevicePreviewState extends State<DevicePreview> {
@override
void initState() {
_onScreenshot = StreamController<DeviceScreenshot>.broadcast();
_toolsPanelRight =
widget.toolsPanelRight ?? ToolsPanelModel(tools: widget.tools);
_toolsPanelLeft = widget.toolsPanelLeft ?? ToolsPanelModel(tools: []);

super.initState();
}

Expand Down Expand Up @@ -510,9 +534,13 @@ class _DevicePreviewState extends State<DevicePreview> {
(DevicePreviewStore store) => store.settings.backgroundTheme,
);

final isToolbarVisible = widget.isToolbarVisible &&
final isToolbarVisibleRight = widget.isToolbarVisible &&
context.select(
(DevicePreviewStore store) => store.data.isToolbarVisible,
(DevicePreviewStore store) => store.data.isToolbarVisibleRight,
);
final isToolbarVisibleLeft = widget.isToolbarVisible &&
context.select(
(DevicePreviewStore store) => store.data.isToolbarVisibleLeft,
);

final toolbar = toolbarTheme.asThemeData();
Expand All @@ -532,62 +560,72 @@ class _DevicePreviewState extends State<DevicePreview> {
final mediaQuery = MediaQuery.of(context);
final isSmall = constraints.maxWidth < 700;

final borderRadius = isToolbarVisible
? BorderRadius.only(
topRight: isSmall
? Radius.zero
: const Radius.circular(16),
bottomRight: const Radius.circular(16),
bottomLeft: isSmall
? const Radius.circular(16)
: Radius.zero,
)
: BorderRadius.zero;
final borderRadius = BorderRadius.zero;
final double rightPanelOffset = !isSmall
? (isEnabled
? ToolPanel.panelWidth - 10
? (isToolbarVisibleRight
? _toolsPanelRight.panelWidth - 10
: (64 + mediaQuery.padding.right))
: 0;
final double leftPanelOffset = !isSmall
? (isToolbarVisibleLeft
? _toolsPanelLeft.panelWidth - 10
: (64 + mediaQuery.padding.right))
: 0;
final double bottomPanelOffset =
isSmall ? mediaQuery.padding.bottom + 52 : 0;
return Stack(
children: <Widget>[
if (isToolbarVisible && isSmall)
if (isSmall)
Positioned(
key: const Key('Small'),
bottom: 0,
right: 0,
left: 0,
child: DevicePreviewSmallLayout(
slivers: widget.tools,
toolsPanelRight: _toolsPanelRight,
toolsPanelLeft: _toolsPanelLeft,
maxMenuHeight: constraints.maxHeight * 0.5,
scaffoldKey: scaffoldKey,
isRight: true,
onMenuVisibleChanged: (isVisible) => setState(() {
_isToolPanelPopOverOpen = isVisible;
}),
),
),
if (isToolbarVisible && !isSmall)
if (!isSmall && _toolsPanelLeft.tools.isNotEmpty)
Positioned.fill(
key: const Key('Large-toolsPanelLeft'),
child: DevicePreviewLargeLayout(
tools: _toolsPanelLeft,
isRight: false,
),
),
if (!isSmall && _toolsPanelRight.tools.isNotEmpty)
Positioned.fill(
key: const Key('Large'),
key: const Key('Large-toolsPanelRight'),
child: DevicePreviewLargeLayout(
slivers: widget.tools,
tools: _toolsPanelRight,
isRight: true,
),
),
AnimatedPositioned(
key: const Key('preview'),
duration: const Duration(milliseconds: 200),
left: 0,
right: isToolbarVisible ? rightPanelOffset : 0,
left: _toolsPanelLeft.tools.isNotEmpty
? leftPanelOffset
: 0,
right: _toolsPanelRight.tools.isNotEmpty
? rightPanelOffset
: 0,
top: 0,
bottom: isToolbarVisible ? bottomPanelOffset : 0,
bottom: bottomPanelOffset,
child: Theme(
data: background,
child: Container(
decoration: BoxDecoration(
boxShadow: const [
BoxShadow(
blurRadius: 20,
blurRadius: 10,
color: Color(0xAA000000),
),
],
Expand Down
14 changes: 14 additions & 0 deletions device_preview/lib/src/model/tools_panel_model.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import 'package:flutter/material.dart';

class ToolsPanelModel {
/// List of tools on the side.
final List<Widget> tools;

/// The panel width when not modal.
final double panelWidth;

ToolsPanelModel({
required this.tools,
this.panelWidth = 320,
});
}
5 changes: 4 additions & 1 deletion device_preview/lib/src/state/state.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ class DevicePreviewData with _$DevicePreviewData {
/// properties.
const factory DevicePreviewData({
/// Indicate whether the toolbar is visible.
@Default(true) bool isToolbarVisible,
@Default(true) bool isToolbarVisibleLeft,

/// Indicate whether the toolbar is visible.
@Default(true) bool isToolbarVisibleRight,

/// Indicate whether the device simulation is enabled.
@Default(true) bool isEnabled,
Expand Down
Loading