10000 [beta] CP request for https://github.com/flutter/flutter/pull/167677 … · flutter/flutter@8545480 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8545480

Browse files
ellietteelliette
authored
[beta] CP request for #167677 (#168386)
### CP request for #167677 into flutter-3.32-candidate.0 **Impacted Users:** Some subset of widget inspector users with a specific configuration of `package:go_router`, see upvotes and comments on #166118. **Impact Description:** Depending on how users have configured their routes using `package:go_router`, enabling / disabling the widget inspector can be destructive to their app's routing state, preventing them from inspecting widgets on secondary screens of their app. **Workaround:** No workaround available. **Risk:** Low **Test Coverage:** Yes, tests were added and this has been manually tested as well **Validation Steps:** - Run a Flutter app - Open the DevTools Inspector for the running app - Toggle "Select widget mode" - An additional button has been added to the on-device inspector that allows developers to both interact with their app (e.g. navigate to a new page) and select widgets while in Widget Selection mode. See gif below. ![new_on_device_inspector](https://github.com/user-attachments/assets/7202ccb3-05cd-4262-be70-9cd08513933a)
1 parent 87cd289 commit 8545480

File tree

6 files changed

+668
-124
lines changed

6 files changed

+668
-124
lines changed

‎packages/flutter/lib/src/cupertino/app.dart

Lines changed: 106 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import 'package:flutter/widgets.dart';
1515

1616
import 'button.dart';
1717
import 'colors.dart';
18+
import 'constants.dart';
1819
import 'icons.dart';
1920
import 'interface_level.dart';
2021
import 'localizations.dart';
@@ -534,46 +535,44 @@ class _CupertinoAppState extends State<CupertinoApp> {
534535
Widget _exitWidgetSelectionButtonBuilder(
535536
BuildContext context, {
536537
required VoidCallback onPressed,
538+
required String semanticLabel,
537539
required GlobalKey key,
538540
}) {
539-
return CupertinoButton(
540-
key: key,
541-
color: _widgetSelectionButtonsBackgroundColor(context),
542-
padding: EdgeInsets.zero,
541+
return _CupertinoInspectorButton.filled(
543542
onPressed: onPressed,
544-
child: Icon(
545-
CupertinoIcons.xmark,
546-
size: 28.0,
547-
color: _widgetSelectionButtonsForegroundColor(context),
548-
semanticLabel: 'Exit Select Widget mode.',
549-
),
543+
semanticLabel: semanticLabel,
544+
icon: CupertinoIcons.xmark,
545+
buttonKey: key,
550546
);
551547
}
552548

553549
Widget _moveExitWidgetSelectionButtonBuilder(
554550
BuildContext context, {
555551
required VoidCallback onPressed,
552+
required String semanticLabel,
556553
bool isLeftAligned = true,
557554
}) {
558-
return CupertinoButton(
555+
return _CupertinoInspectorButton.iconOnly(
559556
onPressed: onPressed,
560-
padding: EdgeInsets.zero,
561-
child: Icon(
562-
isLeftAligned ? CupertinoIcons.arrow_right : CupertinoIcons.arrow_left,
563-
size: 32.0,
564-
color: _widgetSelectionButtonsBackgroundColor(context),
565-
semanticLabel:
566-
'Move "Exit Select Widget mode" button to the ${isLeftAligned ? 'right' : 'left'}.',
567-
),
557+
semanticLabel: semanticLabel,
558+
icon: isLeftAligned ? CupertinoIcons.arrow_right : CupertinoIcons.arrow_left,
568559
);
569560
}
570561

571-
Color _widgetSelectionButtonsForegroundColor(BuildContext context) {
572-
return CupertinoTheme.of(context).primaryContrastingColor;
573-
}
574-
575-
Color _widgetSelectionButtonsBackgroundColor(BuildContext context) {
576-
return CupertinoTheme.of(context).primaryColor;
562+
Widget _tapBehaviorButtonBuilder(
563+
BuildContext context, {
564+
required VoidCallback onPressed,
565+
required String semanticLabel,
566+
required bool selectionOnTapEnabled,
567+
}) {
568+
return _CupertinoInspectorButton.toggle(
569+
onPressed: onPressed,
570+
semanticLabel: semanticLabel,
571+
// This icon is also used for the Material-styled button and for DevTools.
572+
// It should be updated in all 3 places if changed.
573+
icon: CupertinoIcons.cursor_rays,
574+
toggledOn: selectionOnTapEnabled,
575+
);
577576
}
578577

579578
WidgetsApp _buildWidgetApp(BuildContext context) {
@@ -607,6 +606,7 @@ class _CupertinoAppState extends State<CupertinoApp> {
607606
debugShowCheckedModeBanner: widget.debugShowCheckedModeBanner,
608607
exitWidgetSelectionButtonBuilder: _exitWidgetSelectionButtonBuilder,
609608
moveExitWidgetSelectionButtonBuilder: _moveExitWidgetSelectionButtonBuilder,
609+
tapBehaviorButtonBuilder: _tapBehaviorButtonBuilder,
610610
shortcuts: widget.shortcuts,
611611
actions: widget.actions,
612612
restorationScopeId: widget.restorationScopeId,
@@ -642,6 +642,7 @@ class _CupertinoAppState extends State<CupertinoApp> {
642642
debugShowCheckedModeBanner: widget.debugShowCheckedModeBanner,
643643
exitWidgetSelectionButtonBuilder: _exitWidgetSelectionButtonBuilder,
644644
moveExitWidgetSelectionButtonBuilder: _moveExitWidgetSelectionButtonBuilder,
645+
tapBehaviorButtonBuilder: _tapBehaviorButtonBuilder,
645646
shortcuts: widget.shortcuts,
646647
actions: widget.actions,
647648
restorationScopeId: widget.restorationScopeId,
@@ -680,3 +681,83 @@ class _CupertinoAppState extends State<CupertinoApp> {
680681
);
681682
}
682683
}
684+
685+
class _CupertinoInspectorButton extends InspectorButton {
686+
const _CupertinoInspectorButton.filled({
687+
required super.onPressed,
688+
required super.semanticLabel,
689+
required super.icon,
690+
super.buttonKey,
691+
}) : super.filled();
692+
693+
const _CupertinoInspectorButton.toggle({
694+
required super.onPressed,
695+
required super.semanticLabel,
696+
required super.icon,
697+
super.toggledOn,
698+
}) : super.tog F41A gle();
699+
700+
const _CupertinoInspectorButton.iconOnly({
701+
required super.onPressed,
702+
required super.semanticLabel,
703+
required super.icon,
704+
}) : super.iconOnly();
705+
706+
@override
707+
Widget build(BuildContext context) {
708+
final Icon buttonIcon = Icon(
709+
icon,
710+
semanticLabel: semanticLabel,
711+
size: iconSizeForVariant,
712+
color: foregroundColor(context),
713+
);
714+
715+
return Padding(
716+
key: buttonKey,
717+
padding: const EdgeInsets.all(
718+
(kMinInteractiveDimensionCupertino - InspectorButton.buttonSize) / 2,
719+
),
720+
child:
721+
variant == InspectorButtonVariant.toggle && !toggledOn!
722+
? CupertinoButton.tinted(
723+
minSize: InspectorButton.buttonSize,
724+
onPressed: onPressed,
725+
padding: EdgeInsets.zero,
726+
child: buttonIcon,
727+
)
728+
: CupertinoButton(
729+
minSize: InspectorButton.buttonSize,
730+
onPressed: onPressed,
731+
padding: EdgeInsets.zero,
732+
color: backgroundColor(context),
733+
child: buttonIcon,
734+
),
735+
);
736+
}
737+
738+
@override
739+
Color foregroundColor(BuildContext context) {
740+
final Color primaryColor = CupertinoTheme.of(context).primaryColor;
741+
final Color secondaryColor = CupertinoTheme.of(context).primaryContrastingColor;
742+
switch (variant) {
743+
case InspectorButtonVariant.filled:
744+
return secondaryColor;
745+
case InspectorButtonVariant.iconOnly:
746+
return primaryColor;
747+
case InspectorButtonVariant.toggle:
748+
return !toggledOn! ? primaryColor : secondaryColor;
749+
}
750+
}
751+
752+
@override
753+
Color backgroundColor(BuildContext context) {
754+
final Color primaryColor = CupertinoTheme.of(context).primaryColor;
755+
switch (variant) {
756+
case InspectorButtonVariant.filled:
757+
case InspectorButtonVariant.toggle:
758+
return primaryColor;
759+
case InspectorButtonVariant.iconOnly:
760+
return const Color(0x00000000);
761+
}
762+
}
763+
}

0 commit comments

Comments
 (0)
0