Search view expands to full screen on device rotation

[elliette]

Fixes #186154

The search anchor overlay now expands to fill the entire screen when the device is rotated and isFullScreen is true.
For non-mobile devices, the open search anchor overlay is similarly resized when the the device size is changed.

Previously we were calculating the search view's max width whenever the search view's route was pushed/popped. Switched to using the constraints provided by LayoutBuilder so that we can recalculate the view's max width during the layout phase when the device is rotated.

Before

After

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the AI contribution guidelines and understand my responsibilities, or I am not using AI tools.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• I followed the breaking change policy and added Data Driven Fixes where supported.
• All existing and new tests are passing.

[gemini-code-assist]

Code Review

This pull request modifies the SearchAnchor component to ensure the search view correctly adapts to screen rotation by removing the viewMaxWidth parameter and utilizing a LayoutBuilder for dynamic constraints. It also includes a new regression test to verify full-screen expansion. Review feedback suggests that the LayoutBuilder is redundant because the view's dimensions are already updated via existing lifecycle methods, and recommends simplifying the widget tree and constraint logic to enhance readability and performance.

[elliette]

Note: Review with "hide whitespace" 😄

[QuncCccccc]

LGTM! Thanks! Once all tests pass, we can mark this as draft and move it over to material_ui package later:)!

[Zekfad]

I believe _SearchAnchorState#_screenSize is incorrectly using screen size (mediaquery) instead of using size of surrounding navigator.

Please check if this example (dynamically changing navigator height) works well with proposed changes:

test.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue.shade100),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('DraggableScrollableSheet Sample')),
        body: const DraggableScrollableSheetExample(),
      ),
    );
  }
}

class DraggableScrollableSheetExample extends StatefulWidget {
  const DraggableScrollableSheetExample({super.key});

  @override
  State<DraggableScrollableSheetExample> createState() =>
      _DraggableScrollableSheetExampleState();
}

class _DraggableScrollableSheetExampleState
    extends State<DraggableScrollableSheetExample> {
  double _dragPosition = 0.5;
  late double _sheetPosition = _dragPosition;
  final minChildSize = 0.25;
  final maxChildSize = 1.0;

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;

    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final double viewHeight = constraints.maxHeight;

        return DraggableScrollableSheet(
          initialChildSize: _sheetPosition,
          builder: (BuildContext context, ScrollController scrollController) {
            return ColoredBox(
              color: colorScheme.primary,
              child: Column(
                children: <Widget>[
                  if (_isOnDesktopAndWeb)
                    Grabber(
                      onVerticalDragUpdate: (DragUpdateDetails details) {
                        setState(() {
                          _dragPosition -= details.delta.dy / viewHeight;
                          _sheetPosition = _dragPosition.clamp(
                            minChildSize,
                            maxChildSize,
                          );
                        });
                      },
                    ),
                  Flexible(
                    child: Navigator(
                      onGenerateRoute: (settings) => MaterialPageRoute(
                        builder: (context) => Scaffold(
                          body: SearchAnchor.bar(
                            isFullScreen: true,
                            suggestionsBuilder: (context, controller) => [
                              for (var i = 0; i < 10; i++)
                                ListTile(title: Text('Test $i')),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  }

  bool get _isOnDesktopAndWeb =>
      kIsWeb ||
      switch (defaultTargetPlatform) {
        TargetPlatform.macOS ||
        TargetPlatform.linux ||
        TargetPlatform.windows => true,
        TargetPlatform.android ||
        TargetPlatform.iOS ||
        TargetPlatform.fuchsia => false,
      };
}

class Grabber extends StatelessWidget {
  const Grabber({super.key, required this.onVerticalDragUpdate});

  final ValueChanged<DragUpdateDetails> onVerticalDragUpdate;

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;

    return GestureDetector(
      onVerticalDragUpdate: onVerticalDragUpdate,
      child: Container(
        width: double.infinity,
        color: colorScheme.onSurface,
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            margin: const EdgeInsets.symmetric(vertical: 8.0),
            width: 32.0,
            height: 4.0,
            decoration: BoxDecoration(
              color: colorScheme.surfaceContainerHighest,
              borderRadius: BorderRadius.circular(8.0),
            ),
          ),
        ),
      ),
    );
  }
}

[elliette]

Hi @Zekfad - that sounds like a different issue than what this PR is addressing. Please file an issue for the above so that it can be tracked. Thanks!

[Zekfad]

Thank you for your reply.
Then I believe this PR would not resolve #186154, as rotating screen is not the root cause, but only a single most visible side effect on mobile platform; on desktop(/web) resizing window will cause same the issue as in provided example above.
Mentioned issue specifically points to issue with search view size out of synth with it's navigator size and rotating screen is one of reproduction methods.

Should we unlink this PR from #186154, or should I file separate issue anyway, maybe then we need to clarify 186154?

[elliette]

Hi @Zekfad - this PR also fixes the resizing window issue described in #186154. For other issues, please file a bug. Thank you!

[QuncCccccc]

on desktop(/web) resizing window will cause same the issue as in provided example above.

I think we also fix the window resizing. This is the example you provdied.

Screen.Recording.2026-05-18.at.12.27.29.PM.mov

[elliette]

With the latest commit, the code sample in #186537 (comment) should also be working correctly.

[Zekfad]

@QuncCccccc, @elliette thank you very much for your time to provide demo videos and fix for the edge case as well!
Will wait for future release when this will land.

[QuncCccccc]

LGTM. Thanks!

[QuncCccccc]

NICE catch:)!

[QuncCccccc]

Seems this PR is ready to go🥳! Since we are waiting for decoupling, I added a "waiting for code freeze" label above and converted this PR to draft so later we'll move the change to material_ui package when it's ready!