Add bottom to CupertinoNavigationBar to allow for a double-row nav bar (#155959)
Fixes [Support segmented controls in nav bars and double row nav bars](https://github.com/flutter/flutter/issues/10469) <img width="270" height="600" alt="Screenshot 2024-09-30 at 3 09 04â¯PM" src="https://github.com/user-attachments/assets/4003116f-69dd-4f8f-a185-6ca151b74d2d">
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
// 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/cupertino.dart';
|
||||
|
||||
/// Flutter code sample for [CupertinoNavigationBar] showing a
|
||||
/// [CupertinoSearchTextField] with padding at the bottom of the navigation bar.
|
||||
|
||||
void main() => runApp(const NavBarApp());
|
||||
|
||||
class NavBarApp extends StatelessWidget {
|
||||
const NavBarApp({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const CupertinoApp(
|
||||
theme: CupertinoThemeData(brightness: Brightness.light),
|
||||
home: NavBarExample(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NavBarExample extends StatefulWidget {
|
||||
const NavBarExample({super.key});
|
||||
|
||||
@override
|
||||
State<NavBarExample> createState() => _NavBarExampleState();
|
||||
}
|
||||
|
||||
class _NavBarExampleState extends State<NavBarExample> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
navigationBar: const CupertinoNavigationBar(
|
||||
middle: Text('CupertinoNavigationBar Sample'),
|
||||
bottom: _NavigationBarSearchField(),
|
||||
automaticBackgroundVisibility: false,
|
||||
),
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
Container(height: 50, color: CupertinoColors.systemRed),
|
||||
Container(height: 50, color: CupertinoColors.systemGreen),
|
||||
Container(height: 50, color: CupertinoColors.systemBlue),
|
||||
Container(height: 50, color: CupertinoColors.systemYellow),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class _NavigationBarSearchField extends StatelessWidget implements PreferredSizeWidget {
|
||||
const _NavigationBarSearchField();
|
||||
|
||||
static const double padding = 8.0;
|
||||
static const double searchFieldHeight = 35.0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: padding, vertical: padding),
|
||||
child: SizedBox(
|
||||
height: searchFieldHeight,
|
||||
child: CupertinoSearchTextField()
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Size get preferredSize => const Size.fromHeight(searchFieldHeight + padding * 2);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// 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/cupertino.dart';
|
||||
import 'package:flutter_api_samples/cupertino/nav_bar/cupertino_navigation_bar.1.dart' as example;
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
|
||||
void main() {
|
||||
testWidgets('CupertinoNavigationBar with bottom widget', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
const example.NavBarApp(),
|
||||
);
|
||||
|
||||
final Finder navBarFinder = find.byType(CupertinoNavigationBar);
|
||||
final Finder searchFieldFinder = find.byType(CupertinoSearchTextField);
|
||||
|
||||
expect(navBarFinder, findsOneWidget);
|
||||
expect(searchFieldFinder, findsOneWidget);
|
||||
|
||||
// The bottom widget is bounded by the navigation bar.
|
||||
expect(
|
||||
tester.getBottomLeft(searchFieldFinder).dy,
|
||||
lessThan(tester.getBottomLeft(navBarFinder).dy),
|
||||
);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user