Skip to content

Add bottom to CupertinoSliverNavigationBar - #155841

Merged
auto-submit[bot] merged 30 commits into
flutter:masterfrom
victorsanni:nav-bar-drawer
Oct 16, 2024
Merged

auto-submit[bot] merged 30 commits into
flutter:masterfrom
victorsanni:nav-bar-drawer

Conversation

@victorsanni

@victorsanni victorsanni commented Sep 27, 2024 •

Copy link
Copy Markdown
Contributor

Fixes Support search box inside large title nav bar
Part of Support segmented controls in nav bars and double row nav bars

None mode (Current default)

none.mode.mov

Always mode

always.mode.mov

Automatic mode

automatic.mode.mov

With CupertinoSlidingSegmentedControl

seg.control.mov
Sample Code
// 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 [CupertinoSliverNavigationBar].

void main() => runApp(const SliverNavBarApp());

class SliverNavBarApp extends StatelessWidget {
  const SliverNavBarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: SliverNavBarExample(),
    );
  }
}

class SliverNavBarExample extends StatelessWidget {
  const SliverNavBarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      // A ScrollView that creates custom scroll effects using slivers.
      child: SafeArea(
        child: CustomScrollView(
          // A list of sliver widgets.
          slivers: <Widget>[
            CupertinoSliverNavigationBar(
              leading: SizedBox(
                width: 100,
                child: Row(
                  children: [
                    Icon(CupertinoIcons.back),
                    Text(
                      'Lists',
                      style: TextStyle(color: CupertinoColors.activeBlue),
                    ),
                  ],
                ),
              ),
              trailing: Icon(CupertinoIcons.plus),
              largeTitle: Text('iPhone'),
              // Change to desired mode.
              drawerMode: NavigationDrawerMode.none,
              drawer: Padding(
                padding: EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 16.0),
                child: CupertinoSearchTextField(),
              ),
            ),
            SliverFillRemaining(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text('Drag me up', textAlign: TextAlign.center),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@github-actions github-actions Bot added framework flutter/packages/flutter repository. See also f: labels. p: cupertino_ui cupertino_ui package in flutter/packages labels Sep 27, 2024
@victorsanni

Copy link
Copy Markdown
Contributor Author

I'm wondering if there is a way to get the intrinsic height of the drawer before building it. If that is possible, then we won't need a drawerHeight property.

Also considering making a widget (say a CupertinoNavigationBarDrawer) to encapsulate the drawer, drawerMode, and drawerHeight properties.

@victorsanni

Copy link
Copy Markdown
Contributor Author

Implement CupertinoSearchTextField opacity fade on scroll should make the video in the automatic case look much nicer :)

@victorsanni

Copy link
Copy Markdown
Contributor Author

Also looking for recommendations on naming.

@MitchellGoodwin MitchellGoodwin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good so far at a glance. I'd recommend adding an example to the PR early. It makes it easier to review.

Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
@github-actions github-actions Bot added f: scrolling Viewports, list views, slivers, etc. d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Sep 30, 2024
Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated

@MitchellGoodwin MitchellGoodwin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall approach LGTM, as far as I know related to scrolling.

Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
@victorsanni victorsanni changed the title Add drawer to CupertinoSliverNavigationBar Add bottom to CupertinoSliverNavigationBar Oct 11, 2024

@Piinks Piinks left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM , except I noticed in the video for automatic mode the search icon sticks out. Is this something we can handle? Or is it in another PR?
(I know you have several related PRs out, this is just the first I am catching up on 🙂 )

Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
Comment thread packages/flutter/lib/src/cupertino/nav_bar.dart Outdated
@victorsanni

Copy link
Copy Markdown
Contributor Author

LGTM , except I noticed in the video for automatic mode the search icon sticks out. Is this something we can handle? Or is it in another PR? (I know you have several related PRs out, this is just the first I am catching up on 🙂 )

Ah, yes. That should be fixed by #155025.

@Piinks

Piinks commented Oct 15, 2024

Copy link
Copy Markdown
Contributor

LGTM , except I noticed in the video for automatic mode the search icon sticks out. Is this something we can handle? Or is it in another PR? (I know you have several related PRs out, this is just the first I am catching up on 🙂 )

Ah, yes. That should be fixed by #155025.

Awesome! I will review that one next! 😀

@victorsanni victorsanni added the autosubmit Merge PR when tree becomes green via auto submit App label Oct 16, 2024
@auto-submit
auto-submit Bot merged commit 293ae2e into flutter:master Oct 16, 2024
@victorsanni
victorsanni deleted the nav-bar-drawer branch October 17, 2024 02:52
Lurchfresser pushed a commit to Lurchfresser/flutter that referenced this pull request Oct 17, 2024
Fixes [Support search box inside large title nav bar](flutter#18103)
Part of [Support segmented controls in nav bars and double row nav bars](flutter#10469)

## None mode (Current default)

https://github.com/user-attachments/assets/d798314e-940f-4311-9a9a-fe999c65f280

## Always mode

https://github.com/user-attachments/assets/950a85aa-8ca2-42ea-bf8b-3cb8f95e616e

## Automatic mode

https://github.com/user-attachments/assets/c7c7240b-d493-4036-a987-30f61d02bac3

## With CupertinoSlidingSegmentedControl

https://github.com/user-attachments/assets/59f4aec4-8d9c-4223-915b-97b73cb25dc8

<details>
<summary>Sample Code</summary>

```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/cupertino.dart';

/// Flutter code sample for [CupertinoSliverNavigationBar].

void main() => runApp(const SliverNavBarApp());

class SliverNavBarApp extends StatelessWidget {
  const SliverNavBarApp({super.key});

  @OverRide
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: SliverNavBarExample(),
    );
  }
}

class SliverNavBarExample extends StatelessWidget {
  const SliverNavBarExample({super.key});

  @OverRide
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      // A ScrollView that creates custom scroll effects using slivers.
      child: SafeArea(
        child: CustomScrollView(
          // A list of sliver widgets.
          slivers: <Widget>[
            CupertinoSliverNavigationBar(
              leading: SizedBox(
                width: 100,
                child: Row(
                  children: [
                    Icon(CupertinoIcons.back),
                    Text(
                      'Lists',
                      style: TextStyle(color: CupertinoColors.activeBlue),
                    ),
                  ],
                ),
              ),
              trailing: Icon(CupertinoIcons.plus),
              largeTitle: Text('iPhone'),
              // Change to desired mode.
              drawerMode: NavigationDrawerMode.none,
              drawer: Padding(
                padding: EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 16.0),
                child: CupertinoSearchTextField(),
              ),
            ),
            SliverFillRemaining(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text('Drag me up', textAlign: TextAlign.center),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

</details>
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Oct 17, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 12, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 13, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

autosubmit Merge PR when tree becomes green via auto submit App d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: scrolling Viewports, list views, slivers, etc. framework flutter/packages/flutter repository. See also f: labels. p: cupertino_ui cupertino_ui package in flutter/packages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support search box inside large title nav bar

3 participants