From 006aa25040040793d2c1db934fb536bf6bf2bb11 Mon Sep 17 00:00:00 2001 From: masaki Date: Mon, 3 Apr 2023 17:51:17 +0900 Subject: [PATCH 1/3] remove BoxShadow With this shadow, the multi-view has unnecessary shadows. In ordinary usage, the appearance doesn't look different even if this box shadow is removed. --- device_preview/lib/src/device_preview.dart | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/device_preview/lib/src/device_preview.dart b/device_preview/lib/src/device_preview.dart index f5e9a6ad..6bd21774 100644 --- a/device_preview/lib/src/device_preview.dart +++ b/device_preview/lib/src/device_preview.dart @@ -1,4 +1,5 @@ import 'dart:async'; +import 'dart:ui' as ui; import 'package:device_frame/device_frame.dart'; import 'package:device_preview/src/state/state.dart'; @@ -17,7 +18,6 @@ import 'package:flutter/rendering.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:provider/provider.dart'; -import 'dart:ui' as ui; import 'locales/default_locales.dart'; import 'utilities/screenshot.dart'; @@ -584,17 +584,8 @@ class _DevicePreviewState extends State { bottom: isToolbarVisible ? bottomPanelOffset : 0, child: Theme( data: background, - child: Container( - decoration: BoxDecoration( - boxShadow: const [ - BoxShadow( - blurRadius: 20, - color: Color(0xAA000000), - ), - ], - borderRadius: borderRadius, - color: background.scaffoldBackgroundColor, - ), + child: ColoredBox( + color: background.scaffoldBackgroundColor, child: ClipRRect( borderRadius: borderRadius, child: isEnabled From 1e638059f3c7e8342381630917daa5c7ab174bdd Mon Sep 17 00:00:00 2001 From: masaki Date: Mon, 3 Apr 2023 18:02:14 +0900 Subject: [PATCH 2/3] remove toolbar scaffoldBackgroundColor With this, the multi-view has unnecessary border. In ordinary usage, the appearance doesn't look different even if this DecoratedBox is removed. --- device_preview/lib/src/device_preview.dart | 190 ++++++++++----------- 1 file changed, 89 insertions(+), 101 deletions(-) diff --git a/device_preview/lib/src/device_preview.dart b/device_preview/lib/src/device_preview.dart index 6bd21774..e761e514 100644 --- a/device_preview/lib/src/device_preview.dart +++ b/device_preview/lib/src/device_preview.dart @@ -503,10 +503,6 @@ class _DevicePreviewState extends State { (DevicePreviewStore store) => store.data.isEnabled, ); - final toolbarTheme = context.select( - (DevicePreviewStore store) => store.settings.toolbarTheme, - ); - final backgroundTheme = context.select( (DevicePreviewStore store) => store.settings.backgroundTheme, ); @@ -516,7 +512,6 @@ class _DevicePreviewState extends State { (DevicePreviewStore store) => store.data.isToolbarVisible, ); - final toolbar = toolbarTheme.asThemeData(); final background = backgroundTheme.asThemeData(); return Directionality( textDirection: TextDirection.ltr, @@ -524,111 +519,104 @@ class _DevicePreviewState extends State { duration: const Duration(milliseconds: 400), child: MediaQueryObserver( //mediaQuery: DevicePreview._mediaQuery(context), - child: DecoratedBox( - decoration: BoxDecoration( - color: toolbar.scaffoldBackgroundColor, - ), - child: LayoutBuilder( - builder: (context, constraints) { - 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 double rightPanelOffset = !isSmall - ? (isEnabled - ? ToolPanel.panelWidth - 10 - : (64 + mediaQuery.padding.right)) - : 0; - final double bottomPanelOffset = - isSmall ? mediaQuery.padding.bottom + 52 : 0; - return Stack( - children: [ - if (isToolbarVisible && isSmall) - Positioned( - key: const Key('Small'), - bottom: 0, - right: 0, - left: 0, - child: DevicePreviewSmallLayout( - slivers: widget.tools, - maxMenuHeight: constraints.maxHeight * 0.5, - scaffoldKey: scaffoldKey, - onMenuVisibleChanged: (isVisible) => setState(() { - _isToolPanelPopOverOpen = isVisible; - }), - ), + child: LayoutBuilder( + builder: (context, constraints) { + 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 double rightPanelOffset = !isSmall + ? (isEnabled + ? ToolPanel.panelWidth - 10 + : (64 + mediaQuery.padding.right)) + : 0; + final double bottomPanelOffset = + isSmall ? mediaQuery.padding.bottom + 52 : 0; + return Stack( + children: [ + if (isToolbarVisible && isSmall) + Positioned( + key: const Key('Small'), + bottom: 0, + right: 0, + left: 0, + child: DevicePreviewSmallLayout( + slivers: widget.tools, + maxMenuHeight: constraints.maxHeight * 0.5, + scaffoldKey: scaffoldKey, + onMenuVisibleChanged: (isVisible) => setState(() { + _isToolPanelPopOverOpen = isVisible; + }), ), - if (isToolbarVisible && !isSmall) - Positioned.fill( - key: const Key('Large'), - child: DervicePreviewLargeLayout( - slivers: widget.tools, - ), + ), + if (isToolbarVisible && !isSmall) + Positioned.fill( + key: const Key('Large'), + child: DervicePreviewLargeLayout( + slivers: widget.tools, ), - AnimatedPositioned( - key: const Key('preview'), - duration: const Duration(milliseconds: 200), - left: 0, - right: isToolbarVisible ? rightPanelOffset : 0, - top: 0, - bottom: isToolbarVisible ? bottomPanelOffset : 0, - child: Theme( - data: background, - child: ColoredBox( - color: background.scaffoldBackgroundColor, - child: ClipRRect( - borderRadius: borderRadius, - child: isEnabled - ? Builder( - builder: _buildPreview, - ) - : Builder( - key: _appKey, - builder: widget.builder, - ), - ), + ), + AnimatedPositioned( + key: const Key('preview'), + duration: const Duration(milliseconds: 200), + left: 0, + right: isToolbarVisible ? rightPanelOffset : 0, + top: 0, + bottom: isToolbarVisible ? bottomPanelOffset : 0, + child: Theme( + data: background, + child: ColoredBox( + color: background.scaffoldBackgroundColor, + child: ClipRRect( + borderRadius: borderRadius, + child: isEnabled + ? Builder( + builder: _buildPreview, + ) + : Builder( + key: _appKey, + builder: widget.builder, + ), ), ), ), - Positioned.fill( - child: IgnorePointer( - ignoring: !_isToolPanelPopOverOpen, - child: Localizations( - locale: const Locale('en', 'US'), - delegates: const [ - GlobalMaterialLocalizations.delegate, - GlobalCupertinoLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - child: Navigator( - onGenerateInitialRoutes: (navigator, name) { - return [ - MaterialPageRoute( - builder: (context) => Scaffold( - key: scaffoldKey, - backgroundColor: Colors.transparent, - ), + ), + Positioned.fill( + child: IgnorePointer( + ignoring: !_isToolPanelPopOverOpen, + child: Localizations( + locale: const Locale('en', 'US'), + delegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalCupertinoLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + child: Navigator( + onGenerateInitialRoutes: (navigator, name) { + return [ + MaterialPageRoute( + builder: (context) => Scaffold( + key: scaffoldKey, + backgroundColor: Colors.transparent, ), - ]; - }, - ), + ), + ]; + }, ), ), ), - ], - ); - }, - ), + ), + ], + ); + }, ), ), ), From 7011cb7ffaa83d1fcf9b7a8523bcc5cee5f35e57 Mon Sep 17 00:00:00 2001 From: masaki Date: Wed, 5 Apr 2023 18:28:52 +0900 Subject: [PATCH 3/3] add properties for padding This change enables users to set padding on the top/left/right/bottom of the frame. By default, there is no difference from the previous code. --- device_preview/lib/src/device_preview.dart | 24 ++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/device_preview/lib/src/device_preview.dart b/device_preview/lib/src/device_preview.dart index e761e514..4f2628c6 100644 --- a/device_preview/lib/src/device_preview.dart +++ b/device_preview/lib/src/device_preview.dart @@ -61,6 +61,10 @@ class DevicePreview extends StatefulWidget { this.storage, this.enabled = true, this.backgroundColor, + this.paddingTop = 20, + this.paddingRight = 20, + this.paddingLeft = 20, + this.paddingBottom = 20, }) : super(key: key); /// If not [enabled], the [child] is used directly. @@ -103,6 +107,18 @@ class DevicePreview extends StatefulWidget { /// To disable settings persistence use `DevicePreviewStorage.none()`. final DevicePreviewStorage? storage; + /// The padding on the top of the frame. + final double paddingTop; + + /// The padding on the right of the frame. + final double paddingRight; + + /// The padding on the left of the frame. + final double paddingLeft; + + /// The padding on the bottom of the frame. + final double paddingBottom; + /// All the default available devices. static final List defaultDevices = Devices.all; @@ -426,10 +442,10 @@ class _DevicePreviewState extends State { return Container( color: widget.backgroundColor ?? theme.canvasColor, padding: EdgeInsets.only( - top: 20 + mediaQuery.viewPadding.top, - right: 20 + mediaQuery.viewPadding.right, - left: 20 + mediaQuery.viewPadding.left, - bottom: 20, + top: widget.paddingTop + mediaQuery.viewPadding.top, + right: widget.paddingRight + mediaQuery.viewPadding.right, + left: widget.paddingLeft + mediaQuery.viewPadding.left, + bottom: widget.paddingBottom, ), child: FittedBox( fit: BoxFit.contain,