
Fix the NavigationBar example overflow alignment. ### Before: <img src="https://github.com/user-attachments/assets/a6cf2cbb-ac32-482c-9aed-8cac15152a0d" height="450" /> ### After: <img src="https://github.com/user-attachments/assets/d476c617-edd3-449d-93cf-4a9a87c26d98" height="450" /> *List which issues are fixed by this PR. You must list at least one issue. An issue is not required if the PR fixes something trivial like a typo.* *If you had to change anything in the [flutter/tests] repo, include a link to the migration guide as per the [breaking change policy].* ## Pre-launch Checklist - [X] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [X] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [X] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [X] I listed at least one issue that this PR fixes in the description above. - [X] I updated/added relevant documentation (doc comments with `///`). - [X] I added new tests to check the change I am making, or this PR is [test-exempt]. - [X] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [X] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
101 lines
3.0 KiB
Dart
101 lines
3.0 KiB
Dart
// Copyright 2014 The Flutter Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
/// Flutter code sample for [NavigationBar].
|
|
|
|
void main() => runApp(const NavigationBarApp());
|
|
|
|
class NavigationBarApp extends StatelessWidget {
|
|
const NavigationBarApp({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return const MaterialApp(home: NavigationExample());
|
|
}
|
|
}
|
|
|
|
class NavigationExample extends StatefulWidget {
|
|
const NavigationExample({super.key});
|
|
|
|
@override
|
|
State<NavigationExample> createState() => _NavigationExampleState();
|
|
}
|
|
|
|
class _NavigationExampleState extends State<NavigationExample> {
|
|
int currentPageIndex = 0;
|
|
NavigationDestinationLabelBehavior labelBehavior = NavigationDestinationLabelBehavior.alwaysShow;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
bottomNavigationBar: NavigationBar(
|
|
labelBehavior: labelBehavior,
|
|
selectedIndex: currentPageIndex,
|
|
onDestinationSelected: (int index) {
|
|
setState(() {
|
|
currentPageIndex = index;
|
|
});
|
|
},
|
|
destinations: const <Widget>[
|
|
NavigationDestination(
|
|
icon: Icon(Icons.explore),
|
|
label: 'Explore',
|
|
),
|
|
NavigationDestination(
|
|
icon: Icon(Icons.commute),
|
|
label: 'Commute',
|
|
),
|
|
NavigationDestination(
|
|
selectedIcon: Icon(Icons.bookmark),
|
|
icon: Icon(Icons.bookmark_border),
|
|
label: 'Saved',
|
|
),
|
|
],
|
|
),
|
|
body: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: <Widget>[
|
|
Text('Label behavior: ${labelBehavior.name}'),
|
|
const SizedBox(height: 10),
|
|
OverflowBar(
|
|
spacing: 10.0,
|
|
overflowAlignment: OverflowBarAlignment.center,
|
|
overflowSpacing: 10.0,
|
|
children: <Widget>[
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
setState(() {
|
|
labelBehavior = NavigationDestinationLabelBehavior.alwaysShow;
|
|
});
|
|
},
|
|
child: const Text('alwaysShow'),
|
|
),
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
setState(() {
|
|
labelBehavior = NavigationDestinationLabelBehavior.onlyShowSelected;
|
|
});
|
|
},
|
|
child: const Text('onlyShowSelected'),
|
|
),
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
setState(() {
|
|
labelBehavior = NavigationDestinationLabelBehavior.alwaysHide;
|
|
});
|
|
},
|
|
child: const Text('alwaysHide'),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|