firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimize Overlay sample to avoid overflow (#155861)

Browse Source 
Fixes [Optimize official `Overlay` sample to avoid overflowing.](https://github.com/flutter/flutter/issues/155860)

When checking https://main-api.flutter.dev/flutter/widgets/Overlay-class.html on a laptop screen it overflows as the layout uses Row instead of more robust widget for spacing `Wrap`

Quick Friday night fix. :) 

| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/user-attachments/assets/eea6f1d9-e860-4ebd-8d16-2d8f4141e1ec" /> | <img src="https://github.com/user-attachments/assets/9f8426ba-d541-44a6-8ea6-2e34636b7e82"  /> |
This commit is contained in:
Taha Tesser 2024-09-28 12:20:32 +03:00 committed by GitHub
parent 71fd800e7e
commit 9f88de930b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 75 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
examples/api/lib/widgets/overlay/overlay.0.dart
View File

@ -141,71 +141,76 @@ class _OverlayExampleState extends State<OverlayExample> {
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Use Overlay to highlight a NavigationBar destination',
style: Theme.of(context).textTheme.bodyMedium,
),
const SizedBox(height: 20.0),
Row(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
spacing: 10.0,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// This creates a highlight Overlay for
// the Explore item.
ElevatedButton(
onPressed: () {
setState(() {
currentPageIndex = 0;
});
createHighlightOverlay(
alignment: AlignmentDirectional.bottomStart,
borderColor: Colors.red,
);
},
child: const Text('Explore'),
Text(
'Use Overlay to highlight a NavigationBar destination',
style: Theme.of(context).textTheme.bodyMedium,
),
const SizedBox(width: 20.0),
// This creates a highlight Overlay for
// the Commute item.
ElevatedButton(
onPressed: () {
setState(() {
currentPageIndex = 1;
});
createHighlightOverlay(
alignment: AlignmentDirectional.bottomCenter,
borderColor: Colors.green,
);
},
child: const Text('Commute'),
Wrap(
spacing: 10.0,
runSpacing: 10.0,
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.center,
children: <Widget>[
// This creates a highlight Overlay for
// the Explore item.
ElevatedButton(
onPressed: () {
setState(() {
currentPageIndex = 0;
});
createHighlightOverlay(
alignment: AlignmentDirectional.bottomStart,
borderColor: Colors.red,
);
},
child: const Text('Explore'),
),
// This creates a highlight Overlay for
// the Commute item.
ElevatedButton(
onPressed: () {
setState(() {
currentPageIndex = 1;
});
createHighlightOverlay(
alignment: AlignmentDirectional.bottomCenter,
borderColor: Colors.green,
);
},
child: const Text('Commute'),
),
// This creates a highlight Overlay for
// the Saved item.
ElevatedButton(
onPressed: () {
setState(() {
currentPageIndex = 2;
});
createHighlightOverlay(
alignment: AlignmentDirectional.bottomEnd,
borderColor: Colors.orange,
);
},
child: const Text('Saved'),
),
],
),
const SizedBox(width: 20.0),
// This creates a highlight Overlay for
// the Saved item.
ElevatedButton(
onPressed: () {
setState(() {
currentPageIndex = 2;
});
createHighlightOverlay(
alignment: AlignmentDirectional.bottomEnd,
borderColor: Colors.orange,
);
removeHighlightOverlay();
},
child: const Text('Saved'),
child: const Text('Remove Overlay'),
),
],
),
const SizedBox(height: 10.0),
ElevatedButton(
onPressed: () {
removeHighlightOverlay();
},
child: const Text('Remove Overlay'),
),
],
),
),
);
}

15
examples/api/test/widgets/overlay/overlay.0_test.dart
View File

@ -38,4 +38,19 @@ void main() {
expect(find.text(commutePage), findsNothing);
expect(find.text(savedPage), findsNothing);
});
testWidgets('Narrow layout does not overflow', (WidgetTester tester) async {
// Set a narrow screen size.
tester.view
..physicalSize = const Size(320, 480)
..devicePixelRatio = 1;
addTearDown(tester.view.reset);
await tester.pumpWidget(
const example.OverlayApp(),
);
// Verify that no overflow errors occur.
expect(tester.takeException(), isNull);
});
}